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


Posted in Javascript onAugust 20, 2019

一:实现定位及到指定位置导航所需组件及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 相关文章推荐
JavaScript模板入门介绍
Sep 26 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
基于复选框demo(分享)
Sep 27 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
vue实现评价星星功能
Jun 30 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 #Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 #Javascript
Vue实现购物车详情页面的方法
Aug 20 #Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 #Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 #Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 #Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 #Javascript
You might like
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
php-fpm中max_children的配置
2019/03/15 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
AngularJS语法详解
2015/01/23 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
python线程的几种创建方式详解
2019/08/29 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
技校生自我鉴定
2013/12/08 职场文书
大学新生军训感言
2014/02/25 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
优秀党支部申报材料
2014/12/24 职场文书
坎儿井导游词
2015/02/09 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python
mysql自增长id用完了该怎么办
2022/02/12 MySQL