解决百度地图javascript Api上万聚合点卡顿问题

在一个包含大量覆盖物的地图项目中,优化前的聚合点加载和地图操作导致卡顿。升级至官方最新MarkerClusterer库后,加载速度显著提升,且无先前问题。老项目中使用旧版本可能导致性能瓶颈。
摘要由CSDN通过智能技术生成

问题:

公司的项目需要在地图上显示上万个覆盖物(实际最多会有两万多个,后面提到的聚合点加载时间都以两万个点为准)。

其实在正常生成聚合点的过程并不会很慢(500ms左右),但是在聚合点生成后,用户如果操作地图(缩放、移动等),就会出现卡顿现象,这也是一开始发现的问题。在后续的优化过程中还发现另外两个问题,如果在加载聚合点之前,用户对地图进行过操作,加载聚合点就会变得非常缓慢(1000ms以上),同时,每次删除聚合点在重新添加都会比上一次慢

解决方案:

直接说解决方案,把项目中引入的MarkerClusterer文件替换成官方github最新的那个就行,文件地址

实测首次加载仅需100ms左右,且没有上面提到的其它问题出现,同时,如果屏幕可见范围内的点位较少时,加载时间也会相应缩短。

本来在后续优化过程中发现另外两个问题后,就觉得应该从源码入手解决,结果上github clone了源码,引入后发现就没问题了。原先引入的是这个代码,这个是旧版本的代码,看了一下git记录,其实2017/12/4就已经有优化了,但是有些老项目可能还在使用旧版本的MarkerClusterer。甚至是新项目在cv代码时也不小心引入了旧版本的MarkerClusterer。

  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
您可以使用百度地图APIJavaScript版本来标注Excel数据。下面是一个大致的步骤: 1. 将Excel数据保存为适当的格式,例如CSV或JSON。 2. 创建一个网页,并引入百度地图APIJavaScript库。 3. 在网页中使用JavaScript代码来读取和解析Excel数据。 4. 使用百度地图API功能,在地图上添加标注。 以下是一个简单的示例代码,用于将CSV文件中的数据标注在百度地图上: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度地图API标注Excel数据</title> <style type="text/css"> #map { width: 100%; height: 500px; } </style> </head> <body> <div id="map"></div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的百度地图API密钥"></script> <script type="text/javascript"> // 读取CSV文件 function readCSV(file) { var request = new XMLHttpRequest(); request.open("GET", file, false); request.send(null); var csvData = request.responseText; return csvData; } // 解析CSV数据 function parseCSV(csvData) { var lines = csvData.split("\n"); var markers = []; for (var i = 0; i < lines.length; i++) { var line = lines[i].trim(); if (line !== "") { var data = line.split(","); var marker = { lng: parseFloat(data), lat: parseFloat(data), title: data }; markers.push(marker); } } return markers; } // 创建地图并添加标注 function createMap(markers) { var map = new BMap.Map("map"); var point = new BMap.Point(markers.lng, markers.lat); map.centerAndZoom(point, 15); for (var i = 0; i < markers.length; i++) { var marker = new BMap.Marker(new BMap.Point(markers[i].lng, markers[i].lat)); map.addOverlay(marker); marker.setTitle(markers[i].title); } } // 读取和解析CSV数据,并创建地图 var csvData = readCSV("data.csv"); var markers = parseCSV(csvData); createMap(markers); </script> </body> </html> ``` 请确保将代码中的"您的百度地图API密钥"替换为您自己的百度地图API密钥。另外,您还需要将"data.csv"替换为您实际保存Excel数据的文件路径。 这只是一个简单的示例,具体的实现方式可能会根据您的数据格式和需求有所不同。您可以根据自己的情况进行调整和优化。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值