微信小程序实现导航功能

- 日理万妓 2023-03-05 03:13 20阅读 0赞

1.  **通过getLocation获得定位**  
     
2.  **必须要把你的地址转为实际的经纬度才能实现导航功能**，因此要使用地理编码API。我这里使用的是高德地图地理编码API，请申请微信小程序，下图是申请后结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70][]

<view data-item="{
       {item}}" catchtap="daohang">查看定位</view>

//获得从前端传来的地址
    daohang:function(e){
      var that =this;
      console.log(e.currentTarget.dataset.item)
      var name=e.currentTarget.dataset.item.name
      var address=e.currentTarget.dataset.item.address;
      that.loadGEO(address,name)
    
    },
    //地址转为经纬度
    loadGEO:function(address,name){
      wx.request({
        url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
        data:{
          key: '你的key',
          address:address,
          s: "rsx",
          city:cityname,
          sdkversion: "sdkversion",
          logversion: "logversion"
        },
        success(res){
          console.log(res.data)
          var address =res.data.geocodes[0].formatted_address
          //返回的是一个类似这样的"xxx.xx,xx.xxx"的字符串经纬度,所以要进行拆分把经度和纬度分开
          var arr=res.data.geocodes[0].location.split(",");
          console.log(arr)
          //要转化为数字，这里用Number()
          var latitude=Number(arr[1]);
          var longitude =Number(arr[0]);
          console.log(latitude,longitude)
          //这里会打开地图
          wx.openLocation({
              latitude: latitude,//,latitude,
              longitude:longitude ,//longitude,
              name: name,//定位名称
              address:address,//具体地址
              scale: 15
            })
        }
      })
    }

最终效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: /images/20230208/66cbfc9c7fe749b2bd1ef019b05884a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/6160e52d62794b4ea578d572c402a097.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/a4f5691f09f6423e8a17940deb19ccc3.png