微信小程序导航

学习目标：

提示：微信小程序导航功能

              轻松掌握微信小程序导航，注意事项微信小程序需要使用到定位的功能！需要使用经纬度

经纬度推荐网站：地图坐标系转换 - 在线工具 (tool.lu)

---

学习内容：

导航：

1. 使用自己key值进行导航
2. 直接导航

---

使用key值进行导航：

提示：需要到自己的微信小程序官方申请导航的key值，一般推荐申请的是腾讯地图的导航

  wxml

微信小程序调用地图

       index.js

var amapFile = require('../../libs/qqmap-wx-jssdk.min');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 是否收藏
    iscollect:true,
    address:"要去的位置"
  },
  // 导航
  navigation(){
    var that = this;
    var qqmapsdk = new amapFile({
      key: '自己申请的key'
    });
    let name=this.data.address
    let address=this.data.address
    qqmapsdk.geocoder({
      address: address,
      success: function(res) {
        // 经度lng  	纬度lat
        let latitude=res.result.location.lat
        let longitude=res.result.location.lng
        console.log(res,'res')
        wx.getLocation({//获取当前经纬度
          type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息  
          success: function (res) {
            console.log(res,'res2')
            console.log(latitude,'latitude')
            console.log(longitude,'longitude')
            wx.openLocation({
                //​使用微信内置地图查看位置。
              latitude: latitude,//要去的纬度-地址
              longitude: longitude,//要去的经度-地址
              name: name,
              address:address,
              scale:18
            })
          }
        })
      },
      complete: res => {
        console.log(res.result.location)
      }
    })
  },
  
 
})

        app.json

 "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序定位的使用"
    }
  },

        qqmap-wx-jssdk.min里面的内容记得加上！！

        

---

直接使用导航：

提示：这里需要使用精准的经纬度，记得使用匹配的

        wxml

      
      
        导航
      
  

        js

 methods: {
    nav: function () {
      wx.openLocation({
        
        latitude: 24.878803318222904, //维度
        longitude: 102.82271535529003, //经度

        // latitude:36.0812917700,	//维度
        // longitude: 114.4562530500, //经度
        // name: "目的地",	//目的地定位名称
        scale: 15, //缩放比例
        address: "昆明市呈贡区第一小学" //导航详细地址
      })
    }

  }

以上为导航的两种方式，仅供参考！！