uniapp - 微信小程序实现腾讯地图位置标点展示，将指定地点进行标记选点并以一个图片图标展示出来（详细示例源码，一键复制开箱即用）

已于 2025-01-16 15:15:11 修改
阅读量5.7k 收藏 5
点赞数 3
分类专栏： 前端组件与功能(开箱即用) uniapp组件与功能(工作经验) uniapp常见问题解决 文章标签： uniapp微信小程序平台端 uniapp小程序地图位置标记 腾讯地图如何给指定位置标点 uniapp地图标记高亮位置 uniapp图片在地图上标记 uniap腾讯地图实现标记位置 uniap官方地图标点详细教程
于 2023-09-26 17:54:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50545213/article/details/133317225
版权
本文介绍了在uniapp微信小程序平台上，如何使用腾讯地图进行位置标点，包括申请开发者密钥、设置安全域名、引入地图SDK等步骤，并提供了详细的代码示例，帮助开发者实现地图上的自定义标记点功能。

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

效果图

在uniapp微信小程序平台端开发，简单快速的实现在地图上进行位置标点功能，使用腾讯地图并进行标点创建和设置（可以自定义标记点的图片）。

uniapp Vue3和Vue2都能用，你只需要复制代码，改个标记图标和位置即可。

在这里插入图片描述

详细步骤

了解本专栏 订阅专栏 解锁全文
微信小程序 - 最新详细实现集成腾讯地图配置流程及使用教程，基于腾讯位置服务做地图标点展示、获取用户当前省市区定位(城市名称)、ip属地定位、精确经纬度数据、逆向解析、搜索地点、位置定位等（示例代码）
王二红
07-24 5835
微信小程序，腾讯地图，报错解决，sdk，详细教程，定位，ip，位置，城市名，省市区，经纬度，小程序中使用腾讯地图，使用腾讯地图API，跨域问题，小程序项目中使用腾讯地图sdk，如何通过ip获取其地址、经纬度、详细地址，腾讯地图跨域解决方法，原生小程序引入腾讯地图，如何植入腾讯地图，配置，植入腾讯地图SDK，怎么用腾讯地图，微信小程序IP属地定位，获取当前用户位置名称，如何使用腾讯地图获取用户的定位位置，在小程序中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析，根据经纬度显示位置，sdk(解析经纬度)
微信小程序 - 最新详细实现打开腾讯地图进行搜索目的地位置，用户利用腾讯地图搜索省份/市区/区县/乡镇/街道/村目标地点后，选中地址获取详细的地址信息及经纬度数据，在地图上标记当前位置并实现地图搜索！
王二红
08-12 4189
微信小程序，vue2，vue3，腾讯地图，地图搜索，搜索位置，搜索城市，地图上标记当前定位，打开地图选择位置，内置地图选地区，获取当前经纬度以及打开地图选择位置信息，小程序中打开地图选择当前定位位置功能，地图选点获取地址，如何实现点击后地图选择定位位置，打开地图选择位置完整功能代码(定位检索周边可移动选点可搜索腾讯地图API)，小程序怎么实现地图定位，怎么打开内置地图让用户自己选择位置，在地图上搜索位置选择，拿到详细地址省市区街道，地图选点获取用户选择的定位信息，打开腾讯地图让用户选择位置功能，在地图上选择
（uni-app）微信小程序之腾讯地图（定位当前位置，地图标点及导航）
阳光总在风雨后丶
05-10 8721
微信小程序之腾讯地图二（导航） 话不多说，直接上图！！！ 一、dom <template> <view> <map id="tencentMap" :style="[...mapStyle]" :show-compass="showCompass" :enable-traffic="enableTraffic" :longitude="longitude" :latitude="latitude" :marker
uni-app/微信小程序接入腾讯位置服务地图选点插件
最新发布
wodecc_u的博客
04-15 1048
uniapp在使用腾讯位置服务地图选点插件的流程及遇到的问题
uniapp 小程序和app map地图上显示多个酷炫动态的标点，头像后端传过来，真机测试有效
hgvhjgghv的博客
04-01 1703
如果需要搜索需要去腾讯地图官网上看文档，找到对应的内容1.申请开发者密钥（key）：申请密钥2.开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)3.下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 、 JavaScriptSDK v1.2。
【Uniapp 附项目】腾讯地图的导入、定位、自定义标点与信息窗体、区域绘制的使用
热门推荐
Brod-Roy的博客
12-01 1万+
之前做过一个高德地图接入，功能基本一致，本文使用腾讯地图完成了相关功能，比高德地图多了一个区域的绘制功能。本文除了功能使用外还会讲解一些两者的异同。
uni-app 小程序使用腾讯地图完成搜索功能
路虽远行则将至，事虽难做则必成。
03-30 5503
使用uni-app开发小程序时候使用腾讯地图原生SDK是，要把原生写法转成vue写法在这记录一下。我们需要注意的是使用高德地图时我们不仅要引入SDK，还要再uni-app中配置允许使用。由于uni-app内置地图就是腾讯，所以获取位置的api，uni.getLocation坐标不用转换，直接使用。高德地图原生sdk搜索，我用地点搜索，渲染结果。达到联想值效果，点击跳转。
【uniapp小程序实战】—— 使用腾讯地图获取定位_uniapp 腾讯地图(2)
2401_84931310的博客
05-13 2735
以上内容为搬运过来的，详情可点击链接跳转至官网。
uniapp小程序端使用腾讯地图
weixin_53156345的博客
05-18 1万+
注册并登录后点击选择进入后按照　Hello world!中的步骤进行。
微信小程序 - 最新打开地图选择位置功能，支持定位附近位置、搜索全国位置及地图标点位置、检索周边位置，可移动选点标记位置（点击选择位置后，获取位置精确详细地址及名称，拿到经纬度等信息）
王二红
07-24 3118
微信小程序，vue2，vue3，腾讯地图，地图搜索，搜索位置，搜索城市，地图上标记当前定位，打开地图选择位置，内置地图选地区，获取当前经纬度以及打开地图选择位置信息，小程序怎么实现地图定位，怎么打开内置地图让用户自己选择位置，在地图上搜索位置选择，拿到详细地址省市区街道，地图选点获取用户选择的定位信息，打开腾讯地图让用户选择位置功能，小程序中打开地图选择当前定位位置功能，地图选点获取地址，如何实现点击后地图选择定位位置，打开地图选择位置完整功能代码(定位检索周边可移动选点可搜索腾讯地图API)，微信小程序授
微信小程序 - 超详细小程序接入腾讯地图的完整流程，提供地图显示、IP 属地定位、地理位置名称、获取经纬度等超多功能示例（可一键复制并运行的功能源代码，详细的注释及常见问题汇总）小白直接上手！
王二红
07-13 5219
微信小程序腾讯地图怎么接入，小程序项目中使用腾讯地图sdk，小程序中使用腾讯地图，微信小程序集成腾讯地图功能，微信小程序通过ip获取其地址、经纬度、详细地址，小程序使用腾讯地图跨域解决方法，微信小程序引入腾讯地图详细教程，原生小程序引入腾讯地图，微信小程序如何植入腾讯地图，微信小程序腾讯地图配置及使用详细教程，小程序植入腾讯地图SDK，微信小程序项目怎么用腾讯地图，微信小程序IP属地定位，获取当前用户位置名称，微信小程序如何使用腾讯地图获取用户的定位位置，在小程序中使用腾讯地图,实现定位,距离计算,实时搜索
uniapp使用腾讯地图展示地址
weixin_56718657的博客
08-17 1084
【代码】uniapp使用腾讯地图展示地址。
uni-app地图标点展示
m0_73481765的博客
12-14 1215
总结：这段代码定义了一个微信小程序的页面结构，页面中有一个地图组件，地图的纬度和经度由脚本中的常量提供，并且地图上有两个标记点，这些标记点的信息也由脚本中的常量数组提供。使用微信小程序框架编写的。它包含一个模板部分和一个脚本部分。
微信小程序-地图标点-画圈（uniapp)
performerk的博客
04-16 966
map使用参考->微信官方文档。
【uniapp】 微信小程序使用腾讯API地图、路线轨迹、marker标记点
weixin_42216995的博客
05-27 2744
腾讯地图、地图选点、marker、轨迹、路线
uniapp 微信小程序地图标记点、聚合点/根据缩放重合点，根据缩放登记显示气泡marik标点
初遇你时动了情
11-18 808
如图，如果要实现上方的效果： 上方两个效果根据经纬度标记点 缩放后有重复点会添加数量 用到的文档地址https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.addMarkers.html MapContext.addMarkers(Object object) 添加标记点 MapContext.initMarkerCluster(Object object) 聚合点
uniapp使用腾讯地图标点
weixin_59525879的博客
12-14 1154
以上就是在uniapp中使用腾讯地图标点的基本步骤。你可以根据需要自定义标点的样式和行为，并添加其他功能，比如点击标点弹出信息窗口等。具体的API文档可以参考腾讯地图开放平台的官方文档。在uniapp项目中引入腾讯地图插件，可以使用uni-app官方提供的。在腾讯地图开放平台上注册账号，并获取到开发者密钥（key）。是一个数组，用于设置地图上的标点信息。中引入并注册腾讯地图插件，并在。（标点的图标路径）等属性。插件管理器来搜索并安装。
uniapp--腾讯地图展示当前位置
前端叶荨，随手记
04-23 704
腾讯地图展示当前位置
uniapp微信小程序实现对地图多点或单点标记（@莫成尘）
莫成尘的博客
02-22 4328
先看代码，复制使用即可。您将看到以下效果： 注意：icon图标需要自行下载并替换，此外调用我本地的地图密钥可能有上线次数，请使用调试不要超过50次！ <template> <view class="box"> <map name="" :markers="markers"></map> </view> </template> <script> export default { data() { ret
uniapp开发微信小程序腾讯地图选点获取省市区
02-23
### 实现 UniApp 中微信小程序腾讯地图选点并获取省市区 #### 准备工作 为了在 UniApp 开发环境中集成腾讯地图 API 并实现选择地点以及获取对应的省市区信息，需要完成如下准备工作： - 注册并登录腾讯位置服务平台账号，在应用管理页面创建新应用，并记录下分配的应用 Key[^3]。 - 进入微信公众平台的小程序官方后台，在设置下的第三方服务中的插件管理部分添加“腾讯位置服务地图选点”和“腾讯位置服务城市选择器”的插件申请[^2]。 #### 编写代码逻辑 ##### 初始化地图组件 确保项目中已安装 `@dcloudio/uni-ui` 组件库以便于使用内置的地图组件。接着可以在页面配置文件中引入腾讯地图 SDK 及其样式表： ```html <template> <view class="container"> <!-- 地图容器 --> <map id="myMap" :longitude="location.longitude" :latitude="location.latitude"></map> <!-- 显示地址详情 --> <text>{{ addressInfo }}</text> <!-- 添加按钮用于触发重新定位或确认所选项 --> <button @click="getCurrentLocation">更新我的位置</button> <button @click="confirmSelection">确认选择的位置</button> </view> </template> ``` ##### JavaScript 部分处理函数定义 接下来编写主要业务逻辑来初始化地图实例、监听用户交互事件（比如拖拽结束）、请求反向地理编码接口以获得详细的行政区划数据等操作。 ```javascript <script> export default { data() { return { location: { longitude: '', latitude: '' }, // 当前坐标点经纬度 addressInfo: '正在加载...', // 展示给用户的地址描述文字 mapContext: null, // 存储地图上下文对象引用 }; }, onLoad(options) { this.initMap(); }, methods: { initMap() { const that = this; wx.getLocation({ type: 'gcj02', success(res) { that.location = res; // 设置初始中心点为当前位置 // 创建地图上下文环境并与 HTML 页面上的 map 标签关联起来 that.mapContext = uni.createMapContext('myMap', this); // 订阅地图状态变化通知，特别是标记被移动后的回调 that.mapContext.onMarkerTap(() => {}); that.mapContext.onRegionChangeEnd((e) => { if (e.causedBy === "drag") { that.getAddressFromCoordinates(that.location); // 移动后立即查询新的位置信息 } }); }, fail(err) { console.error("Failed to get current location:", err); } }); // 请求一次默认的当前位置解析 this.getCurrentLocation(); }, getCurrentLocation() { let that = this; wx.chooseLocation({ // 使用 chooseLocation 方法可以更方便地让用户手动挑选具体位置 success(res) { that.location = res; that.getAddressFromCoordinates(res); }, fail(err) { console.log(`chooseLocation failed:${JSON.stringify(err)}`); } }) }, getAddressFromCoordinates(locObj) { var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js').QQMapWX; var qqmapsdk = new QQMapWX({ key: '您的腾讯地图Key' // 替换成自己申请的有效密钥 }); qqmapsdk.reverseGeocoder({ location: locObj, success(response){ this.addressInfo = response.result.ad_info.province + ',' + response.result.ad_info.city + ',' + response.result.ad_info.district ; }, fail(error){ console.warn("Reverse geocoding error",error); } }); }, confirmSelection(){ // 用户点击确认按钮之后的操作... alert(this.addressInfo); } } } </script> ``` 上述代码实现了通过调用微信提供的 `getLocation()` 接口自动获取设备所在地理位置作为起点；利用 `createMapContext()` 构建了一个与 `<map>` 元素绑定在一起的对象来进行后续控制；每当检测到地图视窗发生改变时都会尝试去刷新最新的行政区域名称展示给前端用户查看；最后还提供了两个按钮分别用来刷新最新位置或是提交最终选定的结果。 #### 注意事项 - 应用过程中务必注意保护好自己的 API 密钥安全，防止泄露造成不必要的损失。 - 对外暴露的服务端接口应当做好必要的鉴权校验措施，避免恶意访问带来的风险。 - 如果遇到性能瓶颈或者其他技术难题建议查阅官方文档寻求帮助或者联系技术支持团队解决。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值