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


Posted in Javascript onJanuary 12, 2021

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

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

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

一、调用腾讯本身的地图

实现结果如下图:

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

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

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

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

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

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

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

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

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

点击

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

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

以上就是第一种方法,

二、第二种方法

首先找到微信小程序的

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

在插件管理中添加该插件

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

使用方法:

首先在app.json文件中配置

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

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

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

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

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

代码如下:

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

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

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

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

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

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

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

Javascript 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
Jquery Fade用法详解
Nov 06 jQuery
使用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中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
Python入门教程之运算符与控制流
2016/08/17 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
python线程的几种创建方式详解
2019/08/29 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
Python之Sklearn使用入门教程
2021/02/19 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
保护环境倡议书范文
2014/05/13 职场文书
小学捐书活动总结
2014/07/05 职场文书
让生命充满爱观后感
2015/06/08 职场文书
最美乡村教师观后感
2015/06/11 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB