vue高德地图每次请求数据，上次的覆盖物还会留下（.Marker；.Polygon）。解决清除上一次的覆盖物

最新推荐文章于 2024-01-24 16:32:35 发布
最新推荐文章于 2024-01-24 16:32:35 发布
阅读量2.6k 收藏 3
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zzzzzzzzzzzke/article/details/123004889
版权

在使用高德地图渲染的时候，会遇到在不刷新页面的情况下，重新去请求数据，会出现上次渲染的覆盖物还会留在地图上。这个时候只有刷新页面重新渲染dom才可以。

解决的办法：

在重新请求数据的时候定义一个getlists

  getlists: 1,  // 判断重新请求数据的时候删除上次的覆盖物

接下来在请求数据的时候把getlists 赋值为2，

 this.getlists = 2;

 最后在渲染的地方进行判断，当等于2的时候 remove,清除上次留下的覆盖物

张可.
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首次高德地图自定义marker并清除marker，都是借鉴各位前辈的代码，然后融合了好多案例，感谢各位前辈
Yebiao1112的博客
10-21 2279
vue中高德自定义多个marker和清除marker
高德地图api--清除覆盖物（已解决）
舒小罗
08-26 7779
出现的问题如下： 左侧点击复选框后右侧会出现绿色相对应的道路，但是再次点击后对应的道路无法隐藏 为了解决这一个问题，可以使用高德地图api里面的“清除所有覆盖物” 文档：https://lbs.amap.com/api/javascript-api/example/common/overlay-clear. 根据文档，清除地图上所有添加的覆盖物需要用 map.clearMap(); 来看看代码： ...
高德地图清除上一次操作遗留的Polygon覆盖物
qq_19249021的博客
05-19 4143
首先先说我目前的场景。我目前项目中：一个地图划分了很多区块，每个区块都是Polygon覆盖物，用来制作鼠标滑动高亮效果。同时点击项目其他地方某处，也会在覆盖物上显示一个小方块，这个小方块我也是使用Polygon做的。 1. 项目痛点 我目前项目中：一个地图划分了很多区块，每个区块都是Polygon覆盖物，用来制作鼠标滑动高亮效果。同时点击项目其他地方某处，也会在覆盖物上显示一个小方块，这个小方块我也是使用Polygon做的。如下图： 高亮区域和白色方块区域都是覆盖物。 我重新添加白色方块覆盖物的时候会.
vue 高德地图 绘制工具的封装实现绘制 矩形 、圆形、多边形、点标记、折线 覆盖物 并编辑
05-07
1：实现对圆形、多边形、点标记、折线 等的绘制； 2：支持单个绘制 或者 多个绘制的选择； 3：支持对绘制后的图形进行删除； 4：支持对绘制后的图形进行编辑，调整； 5：支持根据图形数据显示到地图上，进行后续操作（删除，编辑）； 6：支持获取绘制后的所有覆盖物数据，并返回； 7：支持封装为单个组件，多处调用；
高德地图定位、覆盖物根据级别修改大小、pop弹窗
06-02
是用的是高德地图 包含定位，覆盖物，和根据缩放级别改变覆盖物的大小，和pop的弹窗显示内容
Vuex的使用（七）——mapMutations的用法
讨厌走开啦
09-08 7373
参考文档：https://vuex.vuejs.org/zh/guide/ mapMutations的定义可以对标mapState和mapGetters，就不赘述了，下面直接上示例代码。首先在Vuex中补充mutations的其他几种用法（修改文件路径为src\store\index.js），代码如下： import Vue from “vue”; import Vuex from “vuex”; Vue.use(Vuex); const store = new Vuex.Store({ state: {
高德地图组合使用Autocomplete和PlaceSearch进行POI搜索
夏夏
08-25 2844
实现效果： 页面渲染： <!-- 地图搜索栏 --> <div class="tool_search" v-if="this.toolShow && this.toolSerach"> <el-input id="tipInput" v-model="inputSearchVal" placeholder="请输入搜索名称"> <el-button slot="append" icon="el-icon-search
高德地图 删除marker（指定marker）
yuyu_2019的博客
04-19 8176
点击一个点位，生成一个marker 把所有点击过的点位，放入markerList数组 删除的时候，先清除所有marker,删除positionList数组里的某一项，再循环positionList把marker重绘出来 var positionList = [] // 经纬度数组 var markerList = [] // marker列表 var marker // 初始化地图 var map = new AMap.Map("container"); // 地图绑定点击事件 map.on('cli
android高德地图去除marker,清除所有覆盖物-通用-示例中心-JS API 示例 | 高德地图API...
weixin_35797127的博客
05-26 2060
清除所有覆盖物html,body,#container{height:100%;width:100%;}清除所有覆盖物// 创建地图实例var map = new AMap.Map("container", {zoom: 13,center: [116.43, 39.92],resizeEnable: true});// 创建点、线、面覆盖物实例var marker = new AMap.Mark...
vue2 + 高德地图marker无法清除
qq_46639390的博客
03-18 2423
高德地图文档地址：https://lbs.amap.com/demo/jsapi-v2/example/map-componets/map-overlays。
高德地图实现绘制覆盖物，自定义右键菜单
02-26
使用高德地图js-api实现绘制圆形、矩形、多边形；右键可删除可自定义菜单；
高德地图定位、周边搜索、位置弹框、添加覆盖物等功能
09-07
高德地图定位、周边搜索、位置弹框、添加覆盖物等功能，可以自定义定位，添加覆盖物，覆盖物点击事件等，自定义定位按钮
vue.js高德地图实现热点图代码实例
12-29
1.在index.html引入高德地图JSAPI [removed][removed] 2.地图dom <div id=container xss=removed></div> 3.js实现 export default { data() {}, methods:{ initMap(){ let map = new AMap.Map('
基于Vue.js框架的精品好物数据大屏商城购物平台源码
最新发布
03-25
项目概述：这是一款基于Vue.js框架开发的精品好物数据大屏商城购物平台。该项目采用JavaScript为主要编程语言，同时融入了TypeScript、Vue、HTML等多种技术。项目文件构成丰富，总计322个文件，其中包括193个mjs模块...
vue 使用高德地图标记坐标，去除高德水印logo
m0_37238192的博客
11-12 2479
第一步：找到项目里的index.html引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的高德key"> 同样的文件里面添加下面的css,去掉高德水印 <style type="text/css"> .amap-logo { display...
【VUE】【高德地图】如何隐藏（去除）高德地图api左下角logo
weixin_50885665的博客
03-21 4467
问题背景： 高德地图】如何隐藏（去除）高德地图api左下角logo，网上找到很多方案比如： amap-logo{ display: none;//去掉高德地图logo } .amap-copyright { opacity:0;//去掉高德的版本号 } 但是写在vue的.scss文件中，不管是直接加入以上代码还是利用/deep/去更改都不起作用。如下【未起作用】 解决方案： 最后决定尝试HTML最初的style设置方式，结果成功了，操作如下： 找到这个项目的index.html文件 ...
vue中高德地图常用功能使用步骤【区域掩膜】【背景贴图】【点聚合】
weixin_46447553的博客
01-24 1361
高德地图常用功能介绍，包含区域掩膜、背景贴图、点聚合等
二. vue2使用高德地图-资源撒点添加文字标注点击事件及清除特定资源
weixin_46390461的博客
10-08 1563
vue高德地图添加覆盖物及操作
nvue中使用map组件polyline路线不生效
abs_botton的博客
04-26 2316
问题叙述：在项目开发时遇到了这个问题，因项目临时改需求要求展示卫星地图，所以将原先的vue组件改成了nvue组件（app中nvue组件才支持卫星地图模式），更改完毕后发现轨迹显示不出来了。 进入正题： 我使用的uniapp提供的内置组件map组件，贴一下代码 <map class="map" :longitude="centerlng" :latitude="centerlat" ref="dcmap" :polyline="lineHistory" :markers="markersCom
vue高德地图覆盖物层级
08-29
在vue高德地图中，覆盖物的层级可以通过设置覆盖物元素的z-index属性来控制。在代码中，可以使用el-amap-marker组件的z-index属性来指定覆盖物的层级。例如，可以在el-amap-marker组件中添加z-index="100"来设置该覆盖物的层级为100。同样地，可以通过调整不同覆盖物的z-index值来控制它们的层级关系。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue-aMap高德地图的应用(添加覆盖物点坐标、自定义图标、添加信息窗体信息等)](https://blog.csdn.net/qq_41497443/article/details/109628370)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值