今天來分享一個(gè)微信小程序項(xiàng)目中做的地圖功能
定位功能 當(dāng)前位置功能 以及1公里5公里10公里的視距切換功能 還有點(diǎn)擊跳轉(zhuǎn)選點(diǎn)功能

image.png

因?yàn)楹?jiǎn)書的新的審核規(guī)則沒法直接放小程序二維碼，不然文章就被屏蔽了，想看demo的話可以搜 XMMUI
我只簡(jiǎn)單描述以下實(shí)現(xiàn)步驟 粘貼一下重要代碼 我的小程序的代碼已悉數(shù)更新到碼云上了地址在下面 需要的自取 但請(qǐng)務(wù)必點(diǎn)個(gè)星 謝謝

var key = '自己申請(qǐng)的key'
...
//我用的是高德地圖微信小程序api
//下面方法高德api文檔都有說明
 myAmapFun = new amapFile.AMapWX({
      key: key
    });

  //onload的時(shí)候調(diào)用一次 wx.getLocation確定自身位置
 wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.setData({
          mylatitude: latitude,
          mylongitude: longitude
        });
        myAmapFun.getPoiAround({
          iconPathSelected: '../../assets/home_tab_home_normal.png', //如：..-/..-/img/marker_checked.png
          iconPath: '../../assets/home_tab_home_selected.png', //如：..-/..-/img/marker.png
          success: function (data) {
            markersData = data.markers;
            that.setData({
              markers: markersData,
              latitude: markersData[0].latitude,
              longitude: markersData[0].longitude,
            });
            that.makertap()
          },
          fail: function (info) {
            wx.showModal({
              title: info.errMsg
            })
          }
        })
      }
    })

//makertap是綁定在map上的tap事件 我給了一個(gè)0 的默認(rèn)值用作第一次進(jìn)入的時(shí)候使用

  makertap(e = {
    markerId: 0
  }, points) {
    let that = this;
    let id = e.markerId;
    // console.log('點(diǎn)擊', id);
    // console.log('points', points);
    that.showMarkerInfo(markersData, id);
    that.changeMarkerColor(markersData, id);
    if (!!points) {
      that.setData({
        latitude: points.latitude,
        longitude: points.longitude
      })
    }
    that.calculateDistance()
  },

這個(gè)方法網(wǎng)上有很多我也是找的 計(jì)算的基本準(zhǔn)確
// 計(jì)算距離
  getDistance(lat1, lng1, lat2, lng2) {
    // lat1用戶的緯度
    // lng1用戶的經(jīng)度
    // lat2商家的緯度
    // lng2商家的經(jīng)度
    var radLat1 = lat1 * Math.PI / 180.0;
    var radLat2 = lat2 * Math.PI / 180.0;
    var a = radLat1 - radLat2;
    var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
    s = s * 6378.137;
    //  s = Math.round(s * 10000) / 10000;
    // s = s.toFixed(1) //保留兩位小數(shù)
    s = Math.round(s * 10000) / 10;
    // console.log('經(jīng)緯度計(jì)算的距離:' + s)
    return s
  },
  //計(jì)算距離我的距離
  calculateDistance() {
    let [
      that,
      latitude,
      longitude,
      mylatitude,
      mylongitude
    ] = [
      this,
      this.data.latitude,
      this.data.longitude,
      this.data.mylatitude,
      this.data.mylongitude
    ]
    console.log('latitude:' + latitude)
    console.log('longitude:' + longitude)
    console.log('mylatitude:' + mylatitude)
    console.log('mylongitude:' + mylongitude)
    let distance = that.getDistance(latitude, longitude, mylatitude, mylongitude)
    console.log('距自己距離', distance)
    that.setData({
      distance
    })
  }

這個(gè)函數(shù)是用來計(jì)算地圖上所顯示的左右兩點(diǎn)的經(jīng)緯度 
是上面的函數(shù)的逆推 通過傳入半徑（m）
計(jì)算出兩個(gè)經(jīng)緯度 再用小程序提供的函數(shù)將這兩個(gè)值以數(shù)組形式傳入 從而起到改變視距的功能
 changeBj(e) {
    console.log(e)
    let that = this
    let radiusNum = that.data.radiusNum
    switch (radiusNum) {
      case 1:
        radiusNum = 5
        break;
      case 5:
        radiusNum = 10
        break;
      case 10:
        radiusNum = 1
        break;
    }
    this.setData({
      radiusNum
    })
    let pointslat = this.data.latitude;
    let pointslong = this.data.longitude;
    // let radius = 500/ 1000;
    let range = 180 / Math.PI * radiusNum / 6372.797;
    let lngR = range / Math.cos(pointslat * Math.PI / 180);
    let maxLat = pointslat + range; //最大緯度
    let minLat = pointslat - range; //最小緯度
    let maxLng = pointslong + lngR; //最大經(jīng)度
    let minLng = pointslong - lngR; //最小經(jīng)度
    console.log('maxLat:' + maxLat)
    console.log('minLat:' + minLat)
    console.log('maxLng:' + maxLng)
    console.log('minLng:' + minLng)
    MapContext.includePoints({
      // padding: [100, 20, 300, 20],
      points: [{
          latitude: maxLat,
          longitude: maxLng
        },
        {
          latitude: minLat,
          longitude: minLng
        }
      ]
    })
  },