将接口返回的经纬集合点在高德地图上标记展示,

如果实时刷新地图标记点,不加优化,则会造成过多的带宽消耗

所以,地图只需加载一次,局部更新标记点就好了

代码:

<template>
<section class="map_warpper">
<div id="container" class="map"></div>
</section>
</template> <script>
import redMarker from '@/assets/img/marker-red.png'
import locationMarker from '@/assets/img/marker-location.png' export default {
name: 'mapContainer',
data () {
return {
    // 动态的经纬度点集合
locationArray: [],
markers: [],
cluster: [],
map: null,
// 地图中心点
regionLocation: [],
zoom: 0
}
},
mounted () {
this.initMap()
},
methods: {// 实例化地图
initMap () {
this.regionLocation = util.cookies.get('regionLocation').split(',')
const AMap = window.AMap
this.map = new AMap.Map('container', {
resizeEnable: true,
center: this.regionLocation,
zoom: 12
})
  this.setMarker()
},
// 设置点标记
setMarker () {
this.markers = []
const AMap = window.AMap
// 标记样式
for (const i in this.locationArray) {
const position = this.locationArray[i].split(',')
this.markers.push(new AMap.Marker({
position: position,
content: '<img src=' + locationMarker + '>',
offset: new AMap.Pixel(-15, -15)
}))
}
// 聚合点样式
let sts = [{
url: redMarker,
size: new AMap.Size(64, 64),
offset: new AMap.Pixel(-32, -32)
}]
// 点聚合
this.cluster = new AMap.MarkerClusterer(this.map, this.markers, { styles: sts, gridSize: 80 })
// 自适应展示所有标记点
this.map.setFitView(this.markers)
this.zoom = this.map.getZoom()
}
}
}
</script> <style>
.map {
width: 100%;
height: 100%;
}
.map_warpper {
width: 100%;
height: 800px;
}
</style>

上面代码解决了两个bug:

1.每次执行setMarker()时,都会this.markers = [],

这一步清除标记点,驱动地图标记刷新,然而并未刷新,新旧点并存,随着叠加,点会越来越多,

这时记得queryLocation()调用前强行删除点 this.cluster.Ra = []

2.然而集合点更新了,但视图依旧未触发更新,这时就需要缩放地图来触发更新,

this.map.getZoom()获取当前缩放级别,然后通过 this.map.setZoom()设置缩放,视图达到刷新,问题解决

高德局部刷新标记点,bug解决的更多相关文章

  1. Android 结合实际项目学会ListView局部刷新和相关知识《一》

    转载本专栏博客,请注明出处:道龙的博客 最近在公司参与的项目中有一个界面需要做局部UI更新处理,把其化烦为简为Demoi形式写在这里.我们还是运行该Demo,知道ListView局部刷新的使用场景:( ...

  2. ArcGIS engine中Display类库 (局部刷新)

    转自原文 ArcGIS engine中Display类库 (局部刷新) Display类库包括了用于显示GIS数据的对象.除了负责实际输出图像的主要显示对象(display object)外,这个类库 ...

  3. 安卓易学,爬坑不易——腾讯老司机的RecyclerView局部刷新爬坑之路

    针对手游的性能优化,腾讯WeTest平台的Cube工具提供了基本所有相关指标的检测,为手游进行最高效和准确的测试服务,不断改善玩家的体验.目前功能还在免费开放中. 点击地址:http://wetest ...

  4. ListView实现Item局部刷新

     对于ListView数据的刷新大家都知道,改变Adapter的数据源,然后调用Adapter的notifyDateSetChanged()方法即可. 但是博主在做公司项目的时候,有个下载模块,因为可 ...

  5. android:ListView的局部刷新

    1.简介 对于android中的ListView刷新机制,大多数的程序员都是很熟悉的,修改或者添加adapter中的数据源之后,然后调用notifyDataSetChanged()刷新ListView ...

  6. ASP.Net用jQuery ajax实现页面局部刷新

    刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...

  7. 局部刷新Ajax

    1.1.1  Ajax的由来: 如下注册界面 界面在注册的时候,需要用户输入的信息有很多,假如我们将所有的数据都录入后,在点击会员注册按钮,然后将整个页面数据进行提交,此时如果该用户名已经被占用,那么 ...

  8. 安卓易学,爬坑不易—腾讯老司机的RecyclerView局部刷新爬坑之路

    前言 安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人.下面让我们看看腾讯开发工程师用实例讲解自己踩坑时的解决方案和心路历程. 话说有图有真 ...

  9. .net updatePannel 局部刷新效果实现后,但是仍是全部刷新的修改方法

    最近做了一个小例子,就是晚上都有的那种小的updatepannel的局部刷新的小例子,但是发现按照那个例子虽然能够实现label2的局部刷新,但是看上去效果确实整个页面都在刷新,这让人很头疼,所以我在 ...

随机推荐

  1. Crash

    一.Crash类型 crash 一般产生自 iOS 的微内核 Mach,然后在 BSD 层转换成 UNIX SIGABRT 信号,以标准 POSIX 信号的形式提供给用户.NSException 是使 ...

  2. Visio2013 专业版激活码和激活工具 亲测有效

    Visio2013密钥 专业版:Visio Professional 2013 KEY C2FG9-N6J68-H8BTJ-BW3QX-RM3B3 2NYF6-QG2CY-9F8XC-GWMBW-29 ...

  3. 5.Metasploit攻击载荷深入理解

    Metasploit 进阶第三讲 深入理解攻击载荷   01 Nesus介绍.安装及使用 Nessus介绍 Nessus是一款著名的漏洞扫描及分析工具,提供完整的漏洞扫描服务,并随时更新漏洞数据库. ...

  4. 命令行工具nslookup查域名DNS服务器

    在使用的操作系统里进入终端, 1.输入 nslookup 回车 2.输入 set type=ns 回车 3.输入域名(不带WWW的),如:baidu.com 回车 操作过程如下, > set t ...

  5. HttpClient来自官方的JSON扩展方法

    System.Net.Http.Json Json的序列化和反序列化是我们日常常见的操作,通过System.Net.Http.Json我们可以用少量的代码实现上述操作.正如在github设计文档中所描 ...

  6. 活久见!Linux命令行居然也可以用来查看图像?

    在 Linux 中有很多 GUI 应用程序可以查看图像,但是这对经常使用命令行来工作的人可能会觉得很繁琐.今天要介绍的是 3 个实用的 CLI 图像查看器来在终端上查看图像,让那些使用 CLI 的朋友 ...

  7. IIC驱动学习笔记,简单的TSC2007的IIC驱动编写,测试

    IIC驱动学习笔记,简单的TSC2007的IIC驱动编写,测试 目的不是为了编写TSC2007驱动,是为了学习IIC驱动的编写,读一下TSC2007的ADC数据进行练习,, Linux主机驱动和外设驱 ...

  8. 最小生成树算法【图解】--一文带你理解什么是Prim算法和Kruskal算法

    假设以下情景,有一块木板,板上钉上了一些钉子,这些钉子可以由一些细绳连接起来.假设每个钉子可以通过一根或者多根细绳连接起来,那么一定存在这样的情况,即用最少的细绳把所有钉子连接起来. 更为实际的情景是 ...

  9. 【java设计模式】(7)---策略模式(案例解析)

    策略模式 一.概念 1.理解策略模式 策略模式是一种行为型模式,它将对象和行为分开,将行为定义为 一个行为接口 和 具体行为的实现.策略模式最大的特点是行为的变化,行为之间可以相互替换. 每个if判断 ...

  10. 【Selenium01篇】python+selenium实现Web自动化:搭建环境,Selenium原理,定位元素以及浏览器常规操作!

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 二.话不多说,直接开干,开始搭建自动化测试环境 这里以前在 ...