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


Posted in Javascript onJanuary 12, 2021

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

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

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

一、调用腾讯本身的地图

实现结果如下图:

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

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

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

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

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

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

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

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

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

点击

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

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

以上就是第一种方法,

二、第二种方法

首先找到微信小程序的

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

在插件管理中添加该插件

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

使用方法:

首先在app.json文件中配置

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

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

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

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

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

代码如下:

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

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

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

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

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

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

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

Javascript 相关文章推荐
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
详解vue项目构建与实战
Jun 27 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
使用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
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
使用console进行性能测试
2015/04/27 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
Python的装饰器用法学习笔记
2016/06/24 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
python 字典套字典或列表的示例
2019/12/16 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
高一课前三分钟演讲稿
2014/09/13 职场文书
要账委托书范本
2014/09/15 职场文书
假释思想汇报范文
2014/10/11 职场文书
个性发展自我评价2015
2015/03/09 职场文书
甲午大海战观后感
2015/06/02 职场文书
基层党建工作简报
2015/07/21 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android