微信小程序 接入腾讯地图的两种写法


Posted in Javascript onJanuary 12, 2021

最近在写微信小程序,遇到了一些坑,在网上也查了好多,感觉都没有我想要的答案,

刚处理了这个地图的问题,在这里总结下,希望可以帮助大家。

在微信小程序中,腾讯地图的接入其实是有两种方式的,第一种调用腾讯本身的地图,第二种是使用插件 ma-route

一、调用腾讯本身的地图

实现结果如下图:

微信小程序 接入腾讯地图的两种写法

这个非常简单,而且用的人也很多,

只需要调用两个地图的api.

微信小程序 接入腾讯地图的两种写法

就是上边的两个。当然调用openLocation的时候你首先要调用getLocation授权

需要你在app.json里配置信息,如下:

微信小程序 接入腾讯地图的两种写法

在你需要跳转地图的页面写以下方法:

微信小程序 接入腾讯地图的两种写法

点击

微信小程序 接入腾讯地图的两种写法

可以弹出百度地图,高德地图等第三方软件

以上就是第一种方法,

二、第二种方法

首先找到微信小程序的

微信小程序 接入腾讯地图的两种写法

在插件管理中添加该插件

微信小程序 接入腾讯地图的两种写法

使用方法:

首先在app.json文件中配置

微信小程序 接入腾讯地图的两种写法

其次在它所在目录的main.json文件配置

微信小程序 接入腾讯地图的两种写法

我是基于mpvue写的,所以和开发文档上稍有区别

先有跳转过来的页面拿到终点地址,然后通过getLocation获取当前位置坐标

代码如下:

微信小程序 接入腾讯地图的两种写法

微信小程序 接入腾讯地图的两种写法

微信小程序 接入腾讯地图的两种写法

微信小程序 接入腾讯地图的两种写法

以下是第二种方法:成功后的效果图

微信小程序 接入腾讯地图的两种写法

到此这篇关于微信小程序 接入腾讯地图的两种写法的文章就介绍到这了,更多相关小程序 接入腾讯地图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
javascript入门教程基础篇
Nov 16 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 #Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 #Vue.js
vue 页面跳转的实现方式
Jan 12 #Vue.js
使用js原生实现年份轮播选择效果实例
Jan 12 #Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 #Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 #Vue.js
js动态生成表格(节点操作)
Jan 12 #Javascript
You might like
菜鸟学PHP之Smarty入门
2007/01/04 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php内存缓存实现方法
2015/01/24 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
索趣科技的答案
2007/02/07 Javascript
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
python之array赋值技巧分享
2019/11/28 Python
python with语句的原理与用法详解
2020/03/30 Python
物业电工岗位职责
2013/11/20 职场文书
人力资源专业推荐信
2013/11/29 职场文书
个人求职信范文分享
2013/12/13 职场文书
机关搬迁方案
2014/05/18 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
教师先进个人材料
2014/12/17 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS