微信小程序定位及导航

app.json

"permission": {
  "scope.userLocation": {
    "desc": "你的位置信息将用于小程序位置接口的效果展示"
  }
},

wxml

<view>
  <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}"
  bindpoitap="markertap" show-location enable-poi show-compass enable-building style="width: 100%; height: 300px;">
  </map>
</view>
<view>
  <button type="primary" bindtap="location">定位</button>
</view>

js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    scale:14,//缩放级别，取值范围为3-20
    //当前定位位置
    latitude: '',
    longitude: '',
    //标记点
    markers:[{
      id:"map",
      latitude:'30.721657',
      longitude:'103.996152',
      iconPath:'../../image/location.png',
      alpha:0.9,
      width:'50rpx',
      height:'50rpx'
    }]
  },
  // 定位导航地址
  location(){
    wx.chooseLocation({
      success:function(res){
        console.log(res,"定位")
        wx.openLocation({
          latitude:res.latitude, //要去的纬度-地址
          longitude:res.longitude, //要去的经度-地址
        })
      }
    })
  },
  //获取当前位置
  redirect(){
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        console.log(res,"当前位置")
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
      }
    })
  },
  // 点击地图标记位置
  markertap(e){
    console.log(e,"点击")
   if(e.detail.name){
    //  开始标记
     this.data.markers[0].latitude=e.detail.latitude;
     this.data.markers[0].longitude=e.detail.longitude;
     this.setData({
      markers:this.data.markers
     })
    //  导航选定地址
     wx.openLocation({
      latitude:e.detail.latitude, //要去的纬度-地址
      longitude:e.detail.longitude, //要去的经度-地址
    })
  }
  },
  onLoad() {
    //获取当前位置
   this.redirect()
  }
})