小程序实现地图导航功能

源码下载链接

app.json获取导航授权信息

1.desc授权导航是弹窗文字

 "permission": {
    "scope.userLocation": {
      "desc": "导航需要" 
    }
  },

wxml文件中命令

map组件基本命令以及作用

1.bindmarkertap=“biaoji"标记点击的回调函数
2.data-mark=”“标记点击携带的数据
3.latitude=”“纬度
4. longitude=”“经度
5. markers=”"标记基本参数（通过调用js文件中data来实现）
6. scale="17"地图缩放比例

<map class="map" bindmarkertap="biaoji" data-mark="{{markers[0]}}" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" scale="17"></map>

js文件中命令

1.在data中设置地图界面显示的经纬度

2.在data中设置标记点宽高经纬度

3.标记点点击的回调函数

getLocation获取当前自己经纬度

openLocation跳转腾讯地图并查看导航

未授权地理地理位置的处理

1.showModal弹窗请求授权
2.openSetting跳转在小程序中设置页面

  data: {
    latitude: 31.462191, //纬度
    longitude: 104.75028, //经度
    markers: [{
      id: 1,
      width: 50, //标记宽
      height: 50, //标记高
      latitude: 31.462191,
      longitude: 104.75028,
    }]
  },
  biaoji(e) {
    console.log("标记目的地点击", e)
    wx.getLocation({//获取当前地址信息
      type: 'wgs84',
      success(res) {
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        wx.openLocation({//跳转腾讯地图查看并可以进行导航
          latitude: 31.462191,
          longitude: 104.75028,
        })
      },fail(res){//未授权地理位置处理
        wx.showModal({
          title: '请授权',
          content: '若未授权地理位置,您将不能正常使用导航功能',
          confirmText:"授权",
          success (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              wx.openSetting({//跳转设置授权界面
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }  
    })
  }```