微信小程序实现定位及到指定位置导航的示例代码

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})}})}})

根据如上即可实现自身定位及到指定位置的导航，如下：

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