网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

一:实现定位及到指定位置导航所需组件及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
})
}
})
}
})

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:vue集成chart.js的实现方法
下一篇:微信小程序使用车牌号输入法的示例代码
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap