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


Posted in Javascript onJanuary 12, 2021

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

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

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

一、调用腾讯本身的地图

实现结果如下图:

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

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

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

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

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

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

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

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

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

点击

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

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

以上就是第一种方法,

二、第二种方法

首先找到微信小程序的

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

在插件管理中添加该插件

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

使用方法:

首先在app.json文件中配置

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

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

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

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

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

代码如下:

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

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

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

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

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

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

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

Javascript 相关文章推荐
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 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下MAIL的另一解决方案
2006/10/09 PHP
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
JS 统计时间
2021/03/09 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
如何现实servlet的单线程模式
2014/08/05 面试题
学生励志演讲稿
2014/01/06 职场文书
2014年国庆标语
2014/06/30 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
优秀教师推荐材料
2014/12/16 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
2019大学生实习报告
2019/06/21 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android