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


Posted in Javascript onJanuary 12, 2021

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

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

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

一、调用腾讯本身的地图

实现结果如下图:

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

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

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

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

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

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

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

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

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

点击

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

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

以上就是第一种方法,

二、第二种方法

首先找到微信小程序的

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

在插件管理中添加该插件

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

使用方法:

首先在app.json文件中配置

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

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

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

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

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

代码如下:

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

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

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

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

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

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

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

Javascript 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
js style动态设置table高度
Oct 21 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
理解JS绑定事件
Jan 19 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 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
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
vue实现通讯录功能
2018/07/14 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
react同构实践之实现自己的同构模板
2019/03/13 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
python机器学习之神经网络(二)
2017/12/20 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python交互式图形编程的实现
2019/07/25 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
纺织工程专业个人求职信范文
2014/01/27 职场文书
三方股份合作协议书
2014/10/13 职场文书
2014年党支部工作总结
2014/11/13 职场文书
心灵捕手观后感
2015/06/02 职场文书
运动会主持词大全
2015/07/02 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android