微信小程序实现定位及到指定位置导航的示例代码
更新时间：2019年08月20日 10:14:28 作者：huaweichenai
这篇文章主要介绍了微信小程序实现定位及到指定位置导航的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一：实现定位及到指定位置导航所需组件及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
})
}
})
}
})
根据如上即可实现自身定位及到指定位置的导航，如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript实现网页上的浮动广告的简单方法，需要的朋友可以参考一下2013-06-06
这篇文章主要介绍了JS中如何将base64转换成file的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
这篇文章主要介绍了移动端Ionic App 资讯上下循环滚动的实现代码，实现方法需要借助jQuery库的选择器和动画函数，并且把jquery的操作封装到指令里，具体指令代码大家通过本文学习吧2017-08-08
这篇文章主要介绍了微信小程序上线发布流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了JS实现换肤功能的方法,结合实例形式分析了javascript针对页面元素属性与样式动态操作相关实现技巧,需要的朋友可以参考下2019-01-01
这篇文章主要给大家介绍了利用JavaScript实现事件的中断传播和行为阻止的方法示例，文中给出了详细的介绍和示例代码，相信对大家的理解和学习具有一定的参考借鉴价值，需要的朋友们下面来一起看看吧。2017-01-01
这篇文章主要介绍了在JavaScript中构建ArrayList，很实用,需要的朋友可以参考下2014-09-09
所谓闭包，值得是词法表示包括不必要计算的变量的函数，也就是说，该函数可以使用函数外定义的变量。2010-08-08
开发Echarts图标时经常遇到数据量过多引起的图例错乱,这个时候我们应该如何处理?下面这篇文章主要给大家介绍了关于echarts图例过多显示问题的解决方案,需要的朋友可以参考下2023-11-11
在前端开发中,我们经常需要将数据存储在客户端,以减少网络请求次数,提高用户体验,localStorage 和 sessionStorage 是常用的存储方案,但它们有一些局限性,为了解决这些问题,本文将介绍如何使用 localForage 实现一个带过期时间的本地存储方案,需要的朋友可以参考下2024-09-09
最新评论