微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼

2020-03-21 15:15:43

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

一：實(shí)現(xiàn)定位及到指定位置導(dǎo)航所需組件及API

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

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

二：代碼實(shí)現(xiàn)

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">導(dǎo)航</button></view>

2：js

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

根據(jù)如上即可實(shí)現(xiàn)自身定位及到指定位置的導(dǎo)航，如下：

微信小程序,定位,指定位置導(dǎo)航