微信小程序做地图定位及选点功能

今天来分享一个微信小程序项目中做的地图功能
定位功能 当前位置功能 以及1公里5公里10公里的视距切换功能 还有点击跳转选点功能

image.png

因为简书的新的审核规则没法直接放小程序二维码，不然文章就被屏蔽了，想看demo的话可以搜 XMMUI
我只简单描述以下实现步骤 粘贴一下重要代码 我的小程序的代码已悉数更新到码云上了地址在下面 需要的自取 但请务必点个星 谢谢

var key = '自己申请的key'
...
//我用的是高德地图微信小程序api
//下面方法高德api文档都有说明
 myAmapFun = new amapFile.AMapWX({
      key: key
    });

  //onload的时候调用一次 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事件 我给了一个0 的默认值用作第一次进入的时候使用

  makertap(e = {
    markerId: 0
  }, points) {
    let that = this;
    let id = e.markerId;
    // console.log('点击', 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()
  },

这个方法网上有很多我也是找的 计算的基本准确
// 计算距离
  getDistance(lat1, lng1, lat2, lng2) {
    // lat1用户的纬度
    // lng1用户的经度
    // lat2商家的纬度
    // lng2商家的经度
    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) //保留两位小数
    s = Math.round(s * 10000) / 10;
    // console.log('经纬度计算的距离:' + s)
    return s
  },
  //计算距离我的距离
  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
    })
  }

这个函数是用来计算地图上所显示的左右两点的经纬度 
是上面的函数的逆推 通过传入半径（m）
计算出两个经纬度 再用小程序提供的函数将这两个值以数组形式传入 从而起到改变视距的功能
 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; //最大经度
    let minLng = pointslong - lngR; //最小经度
    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
        }
      ]
    })
  },