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


Posted in Javascript onJanuary 12, 2021

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

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

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

一、调用腾讯本身的地图

实现结果如下图:

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

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

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

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

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

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

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

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

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

点击

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

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

以上就是第一种方法,

二、第二种方法

首先找到微信小程序的

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

在插件管理中添加该插件

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

使用方法:

首先在app.json文件中配置

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

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

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

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

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

代码如下:

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

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

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

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

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

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

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

Javascript 相关文章推荐
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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使用Pear发送邮件(Windows环境)
2016/01/05 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
js 通用订单代码
2013/12/23 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
js 颜色选择插件
2017/01/23 Javascript
javascript数据类型详解
2017/02/07 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
python对于requests的封装方法详解
2019/01/03 Python
Python 串口读写的实现方法
2019/06/12 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
Pycharm调试程序技巧小结
2020/08/08 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
什么是serialVersionUID
2016/03/04 面试题
庆六一文艺汇演活动方案
2014/08/26 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
协议书范文
2015/01/27 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
HTTP中的Content-type详解
2022/01/18 HTML / CSS