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


Posted in Javascript onJanuary 12, 2021

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

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

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

一、调用腾讯本身的地图

实现结果如下图:

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

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

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

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

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

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

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

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

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

点击

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

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

以上就是第一种方法,

二、第二种方法

首先找到微信小程序的

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

在插件管理中添加该插件

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

使用方法:

首先在app.json文件中配置

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

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

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

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

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

代码如下:

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

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

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

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

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

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

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

Javascript 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
vue2.0 路由模式mode="history"的作用
Oct 18 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 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
BBS(php & mysql)完整版(一)
2006/10/09 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
深入理解Javascript中的this关键字
2015/03/27 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
Python中and和or如何使用
2020/05/28 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
小学生竞选班干部演讲稿
2014/04/24 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
焦裕禄观后感
2015/06/03 职场文书
教师节表彰会主持词
2015/07/06 职场文书
幼儿园安全管理制度
2015/08/05 职场文书