高德局部刷新标记点,bug解决
将接口返回的经纬集合点在高德地图上标记展示,
如果实时刷新地图标记点,不加优化,则会造成过多的带宽消耗
所以,地图只需加载一次,局部更新标记点就好了
代码:
<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解决的更多相关文章
- Android 结合实际项目学会ListView局部刷新和相关知识《一》
转载本专栏博客,请注明出处:道龙的博客 最近在公司参与的项目中有一个界面需要做局部UI更新处理,把其化烦为简为Demoi形式写在这里.我们还是运行该Demo,知道ListView局部刷新的使用场景:( ...
- ArcGIS engine中Display类库 (局部刷新)
转自原文 ArcGIS engine中Display类库 (局部刷新) Display类库包括了用于显示GIS数据的对象.除了负责实际输出图像的主要显示对象(display object)外,这个类库 ...
- 安卓易学,爬坑不易——腾讯老司机的RecyclerView局部刷新爬坑之路
针对手游的性能优化,腾讯WeTest平台的Cube工具提供了基本所有相关指标的检测,为手游进行最高效和准确的测试服务,不断改善玩家的体验.目前功能还在免费开放中. 点击地址:http://wetest ...
- ListView实现Item局部刷新
对于ListView数据的刷新大家都知道,改变Adapter的数据源,然后调用Adapter的notifyDateSetChanged()方法即可. 但是博主在做公司项目的时候,有个下载模块,因为可 ...
- android:ListView的局部刷新
1.简介 对于android中的ListView刷新机制,大多数的程序员都是很熟悉的,修改或者添加adapter中的数据源之后,然后调用notifyDataSetChanged()刷新ListView ...
- ASP.Net用jQuery ajax实现页面局部刷新
刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...
- 局部刷新Ajax
1.1.1 Ajax的由来: 如下注册界面 界面在注册的时候,需要用户输入的信息有很多,假如我们将所有的数据都录入后,在点击会员注册按钮,然后将整个页面数据进行提交,此时如果该用户名已经被占用,那么 ...
- 安卓易学,爬坑不易—腾讯老司机的RecyclerView局部刷新爬坑之路
前言 安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人.下面让我们看看腾讯开发工程师用实例讲解自己踩坑时的解决方案和心路历程. 话说有图有真 ...
- .net updatePannel 局部刷新效果实现后,但是仍是全部刷新的修改方法
最近做了一个小例子,就是晚上都有的那种小的updatepannel的局部刷新的小例子,但是发现按照那个例子虽然能够实现label2的局部刷新,但是看上去效果确实整个页面都在刷新,这让人很头疼,所以我在 ...
随机推荐
- HTTP 请求状态码
200 请求成功 304 从缓存中读取 302 + 响应头中定义location: 重定向 // 自定义重定向 @RequestMapping("/customRedirecti ...
- EF Core 数据变更自动审计设计
EF Core 数据变更自动审计设计 Intro 有的时候我们需要知道每个数据表的变更记录以便做一些数据审计,数据恢复以及数据同步等之类的事情, EF 自带了对象追踪,使得我们可以很方便的做一些审计工 ...
- sql MySQL5.7 安装 centos docker
MySQL5.7 安装 1 . 普通安装 # 准备工作 停止以前的数据库并删除配置文件 systemctl stop mysqld rpm -e mysql-community-server-5.7. ...
- 火焰图--记一次cpu降温过程
引子 正值周末,娃儿6:30又如闹铃般准时来叫醒了我们.年前离开美菜,又回到了杭州.原本是想有更多时间陪伴娃儿,然而新的工作节奏与工作地点,让我们每天都是早上见面:这不,为了周末可以多玩一会儿,早早就 ...
- Spring中的设计模式:工厂方法模式
导读 工厂方法模式是所有设计模式中比较常用的一种模式,但是真正能搞懂用好的少之又少,Spring底层大量的使用该设计模式来进行封装,以致开发者阅读源代码的时候晕头转向. 文章首发于微信公众号[码猿技术 ...
- .NET(C#)实现桌面背景切换(控制台应用程序,windows服务版的未实现成功)
AdvancedBackgroundJimmy.Program.cs using AdvancedBackground; using Microsoft.Win32; using System; us ...
- Pointer Lock API(1/3):Pointer Lock 的总体认识
前言 指针锁定(Pointer Lock),以前也叫鼠标锁定,提供了基于鼠标随时间的移动(如deltaΔ)的输入方法,不仅仅是视窗区域鼠标的绝对位置.指针锁定让你能够访问原始的鼠标移动,将鼠标事件的目 ...
- HTML、PHP、CSS、JS之间的关系
23:02:06 2019-08-05 自己要搭建网站 虽然可以下载大佬的界面 但至少要懂一点web开发的知识 我现在感觉像个憨憨 啥都不明白 转载自:知乎 https://www.zhihu.com ...
- 基于.NetCore3.1搭建项目系列 —— 使用Swagger导出文档 (补充篇)
前言 在上一篇导出文档番外篇中,我们已经熟悉了怎样根据json数据导出word的文档,生成接口文档,而在这一篇,将对上一篇进行完善补充,增加多种导出方式,实现更加完善的导出功能. 回顾 1. 获取Sw ...
- Haystack+ES解决搜索服务
最近项目组需要对老的搜索项目进行迁移和改造,刚入职2个星期的我光荣的接受了这份工作,这也是我第一次接触Haystack和Elasticsearch,以下是记录下工作中的一些需求解决,具体haystac ...