腾讯地图 marker 从地图上清空

最新推荐文章于 2024-08-09 18:17:48 发布
最新推荐文章于 2024-08-09 18:17:48 发布
阅读量3.4k 收藏 2
点赞数
分类专栏： 腾讯地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/solocao/article/details/104092928
版权
本文介绍了一种在腾讯地图API中移除Marker的方法，只需将Marker所在地图设置为null即可实现。通过调用marker.setMap(null)这一简单操作，即可轻松清空Marker。

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

腾讯地图marker有一个方法setMap，使用这个方法，可以设置marker所在的地图，只要把所在地图设置为null，就相当于清空了。

marker.setMap(null)

官方参考文档：https://lbs.qq.com/javascript_v2/case-run.html#sample-remove-marker

腾讯地图 面积 撒点
weixin_50885665的博客
07-03 247
【代码】腾讯地图 面积 撒点。
腾讯地图SDK Android版开发 6 显示覆盖物
最新发布
程序喵D的博客
08-19 1260
在地图应用中，Overlay（覆盖层）是指在地图图层之上叠加显示的额外信息层。这些覆盖层可以用来展示各种数据，如交通状况、用户位置、兴趣点（POI）等。在腾讯地图SDK中，可以使用多种类型的覆盖层来增强地图的功能和视觉效果。文本介绍简单的点线面覆盖物使用方法和属性。
Vue引入腾讯地图去除标签Marker
qq_53273102的博客
08-22 2394
vue引用腾讯地图Marker标签的使用
【已解决】微信小程序腾讯地图的map清除markers，setData将marker置空后，安卓和ios还会显示上次的内容的问题所在以及解决办法
番茄Salad
11-23 1598
个人猜测引起这个问题的原因是id重叠了，导致获取不到数据，但是marker还是在的，下面是我没修改之前的代码截图，我是搜索医院位置信息的数据来渲染到map上，每次滑动map都进入一次这个方法，这里使用的id是请求返回的id。
腾讯地图 删除标记点
前端技术
12-17 3110
官方文档：https://lbs.qq.com/javascript_v2/case-run.html#sample-remove-marker
腾讯地图在图中移除和添加点标记官方方法
Red_sevenWord的博客
06-07 1748
移除点标记
vue2腾讯地图选择多个点
weixin_44309299的博客
08-09 248
【代码】vue2腾讯地图选择多个点。
腾讯地图绘制电子围栏
qq_45527370的博客
05-27 1298
腾讯地图在弹框组件中的渲染，进行绘制电子围栏及标记点。以及其编辑和删除
微信小程序 - 腾讯地图使用和选点连线计算距离
iotjin的专栏
04-13 6866
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类 小程序码
vue项目中隐藏腾讯地图的多条路线
qq_37088317的博客
04-18 1162
我有一个界面需要用到腾讯地图的DrivingService驾车路线规划功能。通过使用qq.maps.DrivingService，成功显示了3条路线。在这个界面上，我想点击按钮使路线隐藏。查阅DrivingService官方文档http://lbs.qq.com/javascript_v2/doc/drivingservice.html后，发现有一个函数clear()可以清空DrivingServ...
高德地图——添加标记的两种方法&删除地标记的两种方法
08-29 3590
添加标记： 1、marker.setMap(map); 2、marker.add([marker]); 删除标记： 1.marker.setMap(null); 2 map.remove([marker1,marker2]);（前提是map用add添加的标记） <!DOCTYPE html> <html> <head&gt...
android谷歌地图删除marker,无法将marker从google地图上删除
weixin_30769779的博客
05-27 694
1 问题描述: 为什么无法将marker从map上删除2 删除代码clearMarkers() {this.markers.forEach(marker => {marker.setMap(null);});this.markers = [];}3 错误信息Uncaught TypeError: marker.setMap is not a function4 尝试的方案已经给出提示了，问题...
百度地图去掉marker覆盖物或者去掉maker的label文字
热门推荐
ztop_f的博客
02-09 1万+
var marker = new BMap.Marker(...); //方法1 map.removeOverlay(marker); //方法2 marker.remove(); //如果是Marker设置的setLabel还可以设置其样式来隐藏 mapComponent.state.bikeMarkLabel.setStyle({ display:"none" }); labe
腾讯地图api-地图展示map和覆盖物(标记)
北辰
08-21 6006
地图展示map和覆盖物(标记)详情参考：https://lbs.qq.com/javascript_v2/doc/index.html 最简单的地图展示和覆盖物(标记)示例： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <met...
腾讯地图圆形覆盖物添加移除以及标注偏移问题总结
weixin_30378311的博客
07-22 1737
最近在用腾讯地图的api，对遇到的问题和解决方法做个总结（可能有不正确的地方） 1.初始化地图 // 地图 定义可能要用到的标注，圆形覆盖物等，由于多个，所以都用数组 var searchService,markers = [],lables = [],markerIndex=0,map,circles = [];//初始化地图函数 自定义函数名init function initM...
微信小程序用腾讯地图在地图上展示点位，当点击点位在屏幕底部弹出弹框，请你用代码实现一个完整案例
04-18
很高兴为您解答。以下是一个简单的代码案例，用于微信小程序使用腾讯地图在地图上展示点位，并且当点击点位时，在屏幕底部弹出弹窗。 1. 准备工作 需要在微信小程序的开发者平台中创建一个项目，并且注册腾讯地图 API（https://lbs.qq.com/）。 2. 引用腾讯地图 SDK 在小程序的 index.wxml 文件中，可以添加一个标签引用腾讯地图 SDK。 ``` <!--在index.wxml文件中添加如下代码--> <view class="map-container"> <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" show-location scale="13" markers="{{markers}}" bindmarkertap="markertap"></map> </view> ``` 3. 在小程序中添加地图标记 在小程序的 index.js 文件中，可以定义一个 markers 数组，用于存储地图上的标记，并且将这些标记展示在地图上。 ``` //在index.js文件中添加如下代码 Page({ data: { longitude: '', //中心点经度 latitude: '', //中心点纬度 markers: [] //地图标记 }, onLoad() { const _this = this; // 获取当前位置 wx.getLocation({ type: 'gcj02', success(res) { _this.setData({ longitude: res.longitude, latitude: res.latitude, markers: [{ id: 0, longitude: res.longitude, latitude: res.latitude, title: '我的位置', label: { content: '我在这里', bgColor: '#FF0000', color: '#FFFFFF', fontSize: 12, borderRadius: 5, padding: 5, display: 'ALWAYS', textAlign: 'center', anchorX: 'middle', anchorY: 'top' } }] }); } }); } }); ``` 4. 在小程序中添加弹窗 在小程序的 index.wxml 文件中，可以添加一个 view 元素来作为弹窗容器，并且在 index.js 文件中定义一个 markertap 方法来处理点击标记事件。 ``` <!--在 index.wxml 文件中添加如下代码--> <view class="map-container"> <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" show-location scale="13" markers="{{markers}}" bindmarkertap="markertap"></map> <view class="mark"> <view class="mark-title">{{selectedMarker.title}}</view> <view class="mark-address">{{selectedMarker.address}}</view> </view> </view> ``` ``` //在 index.js 文件中添加如下代码 Page({ data: { longitude: '', //中心点经度 latitude: '', //中心点纬度 markers: [], //地图标记 selectedMarker: {} //当前点击的标记 }, onLoad() { const _this = this; // 获取当前位置 wx.getLocation({ type: 'gcj02', success(res) { _this.setData({ longitude: res.longitude, latitude: res.latitude, markers: [{ id: 0, longitude: res.longitude, latitude: res.latitude, title: '我的位置', label: { content: '我在这里', bgColor: '#FF0000', color: '#FFFFFF', fontSize: 12, borderRadius: 5, padding: 5, display: 'ALWAYS', textAlign: 'center', anchorX: 'middle', anchorY: 'top' } }] }); } }); }, markertap(e) { const _this = this; // 当前点击的标记 const marker = _this.data.markers[e.markerId]; // 设置选中的标记 _this.setData({ selectedMarker: marker }); // 显示弹窗 wx.showModal({ title: marker.title, content: marker.address, showCancel: false, success() { // 点击确定按钮后，清空选中的标记 _this.setData({ selectedMarker: {} }); } }); } }); ``` 通过以上代码，可以实现一个简单的微信小程序，对腾讯地图上的标记进行点击，并且在屏幕底部弹出弹窗。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值