【小程序】地图的基本使用

WXML

//有授权
    <view class="store-map">
        <map id="map" latitude="{{location.latitude}}" longitude="{{location.longitude}}" markers="{{markers}}" polyline="{{polyline}}" bindmarkertap="toRouteDetail" show-location style="width: 100%; height: 300px;"></map>
    </view>


//无授权
<view class="no-map" wx:if="{{!hasMap}}">
    很抱歉，由于您未同意授权地理位置，因此无法使用门店对应功能
    <view>
        <van-button open-type='openSetting' bindopensetting="authLocation" round type="info" color="linear-gradient(to right, #ff672e,#ff4600)" custom-style="margin-right:30rpx">
            点击授权
        </van-button>
    </view>
</view>

data

data: {
    hasMap: false,
    store: [],
    storeItem: {},
    nearStore: {},
    // 地图
    location: {
      latitude: 0,
      longitude: 0
    },
    //标记点(店铺位置)
    markers: [{
      id: 1,
      width: 25,
      height: 33,
      latitude: 0,
      longitude: 0,
      // iconPath: '/imgs/index/mapIcon.png'
    }
    ],
    //路线
    polyline: [{
      //0-起点 1-终点
      points: [{
        longitude: 0,
        latitude: 0
      }, {
        longitude: 0,
        latitude: 0
      }],
      color: "#00FF00",
      width: 3,
      arrowLine: true,
    }],
  },

基础渲染

  onLoad: function (options) {
    this.getLocation();
    this.mapCtx = wx.createMapContext('map')
  },

获得用户坐标

async getLocation() {
    const that = this;
    //获取经纬度信息  
    //注：wx.getLocation只能调起一次用户授权，拒绝后不会再次调用
    wx.getLocation({
      type: "gcj02",
      success: function (res) {
        let data = {
          latitude: res.latitude,
          longitude: res.longitude
        }
        that.setData({
          location: data,
          [`polyline[${0}].points[${0}]`]: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          hasMap: true
        });
        //计算与门店的距离
        that.getStoresLen();
      },
      fail: function (res) {
        console.log(res, "获取地理位置失败");
      }
    });
  }

将所有店铺按距离排序 并选出最近的店铺

getStoresLen(){
    let store = this.data.store;
    const lat = this.data.location.latitude;
    const lng = this.data.location.longitude;
    if(store.length === 0){ return }
    store.forEach(store =>{
      store["distance"] = this.getDistance(
        store.latitude, store.longitude, lat, lng
      ).toFixed(2)
    })
    store.sort(function(a,b){
      return a.distance - b.distance
    })
    // console.log(store);
    this.setData({
      store,
      nearStore: store[0],
      [`markers[${0}].latitude`]: store[0].latitude,
      [`markers[${0}].longitude`]: store[0].longitude,
      [`polyline[${0}].points[${1}]`]: {
        latitude: store[0].latitude,
        longitude: store[0].longitude
      }
    })
    this.includePoints();
  }

计算两点间的距离

getDistance(la1, lo1, la2, lo2) {
    var La1 = la1 * Math.PI / 180.0;
    var La2 = la2 * Math.PI / 180.0;
    var La3 = La1 - La2;
    var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
    s = s * 6378137 / 1000;
    return s;
  }

将两点缩放显示在地图上

includePoints(){
    const location = this.data.location;
    const marker = this.data.markers[0];
    this.mapCtx.includePoints({
      padding: [50],
      points: [{
        latitude: location.latitude,
        longitude: location.longitude
      },{
        latitude: marker.latitude,
        longitude: marker.longitude,
      }],
    });
  }

用户重新授权

  authLocation(e) {
    if (e.type === "opensetting" && e.detail.authSetting["scope.userLocation"]) {
      this.setData({
        hasMap: true
      })
      this.getLocation();
    }
  }