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


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写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
jquery 学习笔记一
Apr 07 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 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
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
php实现多城市切换特效
2015/08/09 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
详解Python中find()方法的使用
2015/05/18 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
python使用turtle库绘制时钟
2020/03/25 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
Python input函数使用实例解析
2019/11/22 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
python 实现音频叠加的示例
2020/10/29 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
投标邀请书范文
2014/01/31 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
Java SSM配置文件案例详解
2021/08/30 Java/Android
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python