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

那些大方舍得为你花钱的人,并不是多么富有,谁的钱都不是大风刮来的,而是他觉得你们的关系比钱重要,因为重要才舍得。透过云端的道路,只亲吻攀登者的足迹。

一:实现定位及到指定位置导航所需组件及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-location
style="width: 100%; height: 300px;"
>
</map>
</view>
<view>
<button type="primary" bindtap="navigate">导航</button>
</view>

2:js

//js
Page({
/**
  * 页面的初始数据
  */
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
})
}
})
}
})

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




到此这篇关于微信小程序实现定位及到指定位置导航的示例代码就介绍到这了。我就像一瓶酒,你洒脱的拿起喝完放下,转身就走。更多相关微信小程序实现定位及到指定位置导航的示例代码内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
PHP解密支付宝小程序的加密数据、手机号的示例代码

Yii使用EasyWechat实现小程序获取用户的openID的方法

基于PHP实现微信小程序客服消息功能

PHP文件上传小程序 适合初学者学习!

PHP实现微信小程序用户授权的工具类示例