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


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 String 的扩展方法集合
Jun 01 Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
第五节 克隆 [5]
2006/10/09 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
JavaScript File分段上传
2016/03/10 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
python批量修改文件后缀示例代码分享
2013/12/24 Python
python中的编码知识整理汇总
2016/01/26 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Pygame框架实现飞机大战
2020/08/07 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
《小松树和大松树》教学反思
2014/02/20 职场文书
党性心得体会
2014/09/03 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python