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


Posted in Javascript onJanuary 12, 2021

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

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

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

一、调用腾讯本身的地图

实现结果如下图:

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

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

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

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

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

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

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

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

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

点击

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

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

以上就是第一种方法,

二、第二种方法

首先找到微信小程序的

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

在插件管理中添加该插件

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

使用方法:

首先在app.json文件中配置

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

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

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

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

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

代码如下:

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

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

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

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

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

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

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

Javascript 相关文章推荐
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
axios post提交formdata的实例
Mar 16 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
JS实现多功能计算器
Oct 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大转盘中奖概率算法实例
2014/10/21 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
表单提交验证类
2006/07/14 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
ext读取两种结构的xml的代码
2008/11/05 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
深入理解Django自定义信号(signals)
2018/10/15 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
Python中print函数简单使用总结
2019/08/05 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
个人简历自我评价八例
2013/10/31 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
低碳环保标语
2014/06/12 职场文书
大学生活动总结模板
2014/07/02 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书