微信小程序直接引用外部地图（腾讯地图、高德地图导航）附代码！！

最新推荐文章于 2025-04-17 08:34:53 发布
最新推荐文章于 2025-04-17 08:34:53 发布
阅读量1w 收藏 56
点赞数 5
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42453562/article/details/108123842
版权
本文介绍了如何在微信小程序中集成地图导航功能，包括配置使用位置权限、解决page.json配置丢失问题、配置Key、下载SDK及提供全局代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果如图：
在这里插入图片描述

附代码：

<template>
	<view class="content">
		<image src="../../static/logo.png" class="addr-image" @click="mapNavigation()"></image>
	</view>
</template>

<script>
	// 引入SDK核心类
	var QQMapWX = require('../../static/qqmap-wx-jssdk.js')
	var qqmapsdk;

	export default {
   
		data() {
   
			return {
   
				addr: "天虹",
最低0.47元/天 解锁文章
微信小程序 - 最新详细实现内置腾讯地图上标点和唤起第三方导航软件功能，在小程序地图上标记一个位置地点并点击导航到该目的地，使用微信内置地图查看位置自定义展示文案，用户不用授权位置信息即可，点击跳转！
王二红
08-05 1万+
微信小程序， vue2，vue3，显示地图的一个位置并导航，地图导航，点击地址可以进行导航，打开外部导航软件，调起第三方地图软件，腾讯地图，高德地图，小程序定位和导航功能，添加定位导航和地图标注功能，在内置地图上标记并点击导航，利用手机系统自带的导航软件，添加地理位置标记和地点，小程序地图开发点击标记点跳转第三方地图，微信小程序实现点击按钮然后打开第三方地图软件app如高德地图百度地图，经纬度，小程序用经度和纬度在地图上标记高亮显示位置，当点击时可使用其他地图软件导航到此，自定义位置名称详细地址地点名字，标
微信小程序 - 实现地图标点及导航功能，在地图上标记位置及第三方软件进行导航（无需授权，点击地址后直接打开地图并在地图上高亮标记位置、展示位置名称、详细地址，“去这里“ 可拉起外部第三方地图导航软件）
王二红
07-12 4627
微信小程序显示地图的一个位置并导航，微信小程序使用地图显示指定位置并从当前位置导航，小程序怎么实现一键导航标题的地图位置，小程序怎么不授权直接打开地图并支持第三方导航软件，小程序在地图上标点并导航，微信小程序中进行地图导航功能，小程序调用地图和跟据经纬度打开手机地图导航，小程序中如何实现地图标记高亮某个位置并支持第三方软件导航，小程序map组件标注点调用第三方地图导航，微信小程序实现调用导航App进行导航，怎么调用导航软件进行指定位置导航，小程序点击地址进行导航教程，小程序地图显示某个位置并导航，小程序展示
微信小程序添加外部地图服务数据
GIS兵器库
10-26 2137
先上效果： 缘起 使用微信小程序做地图相关功能的时候，有个需求是需要接入已发布的地图服务。查看微信小程序地图组件文档，发现它对地图相关的支持很少，只有一些基础功能，比如添加点、线、面、气泡和一些常规的地图事件监听，并没有添加地图服务相关的支持。 不过有了需求，也要想办法解决呀。 图层查询 既然小程序不能直接添加地图服务，那就把图层数据查出来，然后通过添加点线面方式添加到地图，具体要怎么实现呢？ 首先想到的是通过图层查询接口把所有数据查出来。 但是既然数据是按图层发布的，一般数据量都比较大，把所有数据查询出
微信小程序地图组件开发：UniApp 集成高德 / 腾讯地图 API 详解
最新发布
前端开发探索之旅
04-17 2935
通过本文介绍的方法，开发者可以在 UniApp 项目中成功集成高德地图和腾讯地图 API，为微信小程序开发出功能丰富的地图组件。在实际应用中，根据项目需求选择合适的地图服务，并不断优化地图功能，将为用户带来更优质的位置服务体验。希望本文能为广大 UniApp 开发者在地图功能开发方面提供有益的参考和帮助。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
微信小程序--打开第三方地图
weixin_46561899的博客
03-25 1982
点击确认后会返回选择目标地址的经纬度，名字和具体位置信息。
微信小程序 接入第三方地图
is_my_sunshine的博客
05-18 3186
文章目录一、接入腾讯地图1.引入微信jdk2.声明腾讯地图实例3.获取当前定位二、接入高德地图总结 一、接入腾讯地图 1.引入微信jdk var QQMapWX = require('../../common/js/qqmap-wx-jssdk.min.js'); 2.声明腾讯地图实例 var qqmapsdk; qqmapsdk = new QQMapWX({ key: this.key }); 3.获取当前定位 qqmapsdk.reverseGeocoder({ success: res =&
微信小程序开发中的国内外地图服务与API使用
2401_85625565的博客
07-03 998
首先，在微信小程序后台创建并获取谷歌地图的开发者密钥（API Key），然后在小程序代码中引入谷歌地图的SDK，并使用API Key进行初始化。首先，在微信小程序后台创建并获取高德地图的开发者密钥（key），然后在小程序代码中引入高德地图的SDK，并使用开发者密钥进行初始化。下面介绍几个常用的API的使用。高德地图是国内领先的地图服务提供商，提供了丰富的地图数据和API，可以满足大部分微信小程序的地图需求。谷歌地图是国外领先的地图服务提供商，提供了丰富的地图数据和API，可以满足微信小程序的地图需求。
微信小程序中进行地图导航功能的实现方法
08-27
在微信小程序中实现地图导航功能是一项常见的需求，但与传统应用程序不同，由于微信小程序的代码体积和内存限制，无法直接内置完整的地图导航功能。本文将详细介绍如何在微信小程序中巧妙地实现这一功能。 首先，...
微信小程序——添加地图、地图上打点、自定义地图
sinat_38011533的博客
01-15 2万+
目录 1.摘要 1.1 开发工具 1.2 开发框架 1.3 版本号 2. 添加地图 3. 地图打点 4. 个性化地图 4.1 申请开通个性化地图能力 4.2 添加小程序个性地图 4.3 自定义地图 1.摘要 1.1 开发工具 微信开发者工具、sublime、git 1.2 开发框架 wepy2.0 1.3 版本号 微信开发者工具2.9.5、subli...
微信小程序实现内置地图以及打开外部地图导航功能
GKISX1216的博客
05-29 3023
微信小程序实现内置地图以及打开外部地图导航功能
小程序根据国外经纬度显示地图
oneya1的博客
07-02 1101
小程序自带map地图,如果传入国外经纬度,地图会默认切换成国外的here地图 效果展示:(最好是手机预览,微信开发者工具直接看的话,只会显示一个大概的区域) <view class="wanl-goods-content bg-white"> <map style="width:100%;height:40vh;" :latitude="latitude" :longitude="longitude" :markers="covers"></map&gt
微信小程序打开内置地图并通过外部地图进行导航
郭宝的博客
07-08 5645
核心代码： 要显示地图并可以实现导航时，只需要调用如下函数，然后传入要显示在地图中的经纬度和要进行导航的位置名称 /** *查看位置 *latitudelongitude表要展示在地图中的经纬度 *name表示要导航的位置名称 */ viewLocation:function(latitude=30.791611,longitude=111.310880,name='夷陵区殡仪馆'){ wx.getSetting({ ...
移动端简单的调用第三方地图与微信小程序调用第三方地图
weixin_30496431的博客
06-18 1206
移动端 调用高德地图<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图</a> 调用百度地图<a href="http://api.map.baidu.com/marker?location=纬度,经度&title=所在位置名称&content...
微信小程序调用腾讯地图-并解读API文档 JavaScript SDK和 WebService API
克里斯蒂亚诺更新的博客
07-04 4324
设置key的时候，还需要小程序的APPID。看清哪一个key并且设置配额。最终展示： 点击搜索周边KFC就出现红色的预设值坐标的地址。2 调用的接口要开通相应的接口权限。入门中第一步：申请开发者密钥key。1 调用API有次数和额度限制。
微信小程序---高德地图API
热门推荐
vio小黑
11-29 3万+
本文章介绍微信小程序调用高德地图API的过程，使用高德定位功能做演示。 微信小程序目前支持百度地图、高德地图、腾讯地图。用法都基本一致，简单说一下他们的区别，高德地图精度应该是最准确的，毕竟本来就是做地图出生的。百度地图的精度目前较高德而言，还是要稍稍欠缺一点，但是他的附近商家那些要比高德好一点。而关于腾讯地图，暂时来说还是只能表示呵呵，希望越来越好吧。 1.既然本章是介绍微信小程序如何使用高德...
微信小程序中地图导航的使用，分高德导航和腾讯导航
王福旭的专栏
06-19 8579
微信小程序中使用导航功能可食用高德导航和腾讯导航或者百度的导航，此文章主要介绍腾讯导航和高德导航。后面会贴出具体实现导航的代码。 地图基础使用map 标签，具体使用方法可参考微信的官方文档https://developers.weixin.qq.com/miniprogram/dev/component/map.html 腾讯地图sdk： http://3gimg.qq.com/light...
微信小程序 - 接入腾讯地图定位
weixin_34376986的博客
04-15 745
为什么80%的码农都做不了架构师？>>> ...
微信小程序引入高德地图，出来的确实腾讯地图
01-10
### 微信小程序集成高德地图显示腾讯地图解决方案 在微信小程序中，默认的地图服务提供商是腾讯地图。如果希望使用其他地图服务商（如高德地图），则需要特别处理，因为微信小程序并不直接支持第三方地图SDK的完全替换。 #### 使用Webview加载高德地图H5页面 一种可行的方法是在微信小程序内通过`<web-view>`标签来嵌入一个基于HTML5的网页，在这个网页里调用高德地图API完成所需的功能[^1]。这种方式可以绕过微信对于内置地图组件的一些限制，但是需要注意的是，这种方法可能会带来用户体验上的差异以及性能损耗等问题。 ```html <!-- 小程序wxml文件 --> <web-view src="https://yourdomain.com/amap.html"></web-view> ``` 其中`amap.html`是一个托管于服务器端的静态资源文件或者是动态生成的内容，它包含了初始化并配置好参数后的高德地图实例化代码片段： ```javascript // amap.html中的js部分 AMap.plugin('AMap.ToolBar', function() { var map = new AMap.Map('container', { zoom: 10, toolbar: true }); }); ``` #### 地图数据同步机制设计 当采用上述方案时，还需要考虑如何保持小程序内部逻辑与外部加载的地图状态的一致性。这通常涉及到事件监听器的设计，比如点击某个地点后更新UI界面或是发送请求获取更多信息等操作。由于跨域安全策略的存在，可能需要用到消息传递接口(`postMessage`)来进行通信[^2]。 ```javascript // 在amap.html中向父窗口发送消息 window.parent.postMessage({type:'locationSelected',data:{lat,lng}},'*'); ``` 而在接收方即微信小程序侧，则需注册相应的回调函数以响应这些来自WebView的消息通知: ```javascript Page({ onLoad:function(){ wx.onMessage(function(message){ console.log(message); // 处理接收到的信息... }) } }) ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值