微信小程序實現定位及到指定位置導航的示例代碼

2020-03-21 15:15:43

字體：大中小

來源：轉載

供稿：網友

一：實現定位及到指定位置導航所需組件及API

1：組件：map(地圖組件)

2：API：wx.getLocation(Object object)(獲取當前的地理位置、速度)，wx.openLocation(Object object)(使用微信內置地圖查看位置)

二：代碼實現

1：wxml

<view><map id="map"longitude="{{longitude}}"latitude="{{latitude}}"scale="14"markers="{{markers}}"bindmarkertap="markertap"bindregionchange="regionchange"show-locationstyle="width: 100%; height: 300px;"></map></view><view><button type="primary" bindtap="navigate">導航</button></view>

2：js

//jsPage({/**  * 頁面的初始數據  */data: {//設置標記點markers: [{iconPath: "/images/ljx.png",id: 4,latitude: 31.938841,longitude: 118.799698,width: 30,height: 30}],//當前定位位置latitude:'',longitude: '',},navigate() {////使用微信內置地圖查看標記點位置，并進行導航wx.openLocation({latitude: this.data.markers[0].latitude,//要去的緯度-地址longitude: this.data.markers[0].longitude,//要去的經度-地址})},onLoad() {//獲取當前位置wx.getLocation({type: 'gcj02',success: (res) => {console.log(res)this.setData({latitude: res.latitude,longitude: res.longitude})}})}})

根據如上即可實現自身定位及到指定位置的導航，如下：

微信小程序,定位,指定位置導航