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

今天来分享一个微信小程序项目中做的地图功能
定位功能当前位置功能以及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
        }
      ]
    })
  },

最后编辑于：2022.04.20 16:54:49