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


Posted in Javascript onJanuary 12, 2021

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

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

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

一、调用腾讯本身的地图

实现结果如下图:

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

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

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

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

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

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

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

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

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

点击

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

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

以上就是第一种方法,

二、第二种方法

首先找到微信小程序的

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

在插件管理中添加该插件

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

使用方法:

首先在app.json文件中配置

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

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

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

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

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

代码如下:

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

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

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

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

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

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

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

Javascript 相关文章推荐
js的event详解。
Sep 06 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
javascript的push使用指南
Dec 05 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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 数组教程 定义数组
2009/10/23 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
window.open的功能全解析
2006/10/10 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
python实现用户管理系统
2018/01/10 Python
python在非root权限下的安装方法
2018/01/23 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
技术经理的自我评价范文
2013/12/03 职场文书
大学生演讲稿
2014/04/25 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
python基础之爬虫入门
2021/05/10 Python
服务器nginx权限被拒绝解决案例
2022/09/23 Servers