百度地图点聚合,加载1万个marker

    项目需要同时展示多辆车,并且在15s刷新一次。开始用到的是添加多个marker,但是随着车辆的整多,发现发现这种方式已经不能满足需求。于是准备用到百度的点聚合功能,顾名思义,点聚合就是把一定范围的点进行集合显示。看下图就明白了


    在这之前,需要做一下3个准备:

  • 在百度地图开发者平台申请账号
  • 在控制台申请应用
  • 把你申请的放在你自己项目的AndroidManifest.xml的API_KEY

      我自己参考的是百度地图提供Android SDK的demo,于是把这一部分单独提出,集合成了一个自己的小demo。ok过程很愉快。自己加了10个点,发现没毛病。于是乎,在加了1000个点,这个时候发现手机,有一点卡了。哈哈这是啥原因呢?

  于是看了一下源码,发现百度地图的处理是一次加载所有,哈哈找到原因下面就是寻找解决方法了:就是这个地方

 

    那,,,怎么解决呢?

     想到一个方案。如果只绘制当前屏幕内的marker,是不是可以解决这个方法。于是通过百度地图提供的Api对屏幕的左上右下坐标进行了转换。在绘制marker的时候。添加条件,在屏幕内时才进行绘制。如下:由于有上传源码,所以就不具体的讲解实现,这个demo中会进行15s自动刷新,以及在点击marker时,在marker上方弹出一个View这些都不做描述,如有需要可以留言共同探讨。只是把解决这个问题的思路描绘清楚。

    

    最后,自己添加了1W个marker测试了下,运行流畅

    源码下载


  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要在Vue中实现百度地图聚合,可以按照以下步骤进行操作: 1. 首先,在Vue项目中安装百度地图的JavaScript API。可以通过在`index.html`文件中添加以下代码来引入百度地图的API: ```html <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=YOUR_API_KEY"></script> ``` 确保替换`YOUR_API_KEY`为你自己的百度地图API密钥。 2. 在Vue组件中创建地图容器,并初始化地图。可以在`mounted`钩子函数中添加以下代码: ```javascript mounted() { const map = new BMap.Map("map-container"); // 创建地图实例 const point = new BMap.Point(经度, 纬度); // 设置地图中心坐标 map.centerAndZoom(point, 15); // 初始化地图,设置地图缩放级别 this.map = map; // 将地图实例保存到组件数据中 } ``` 确保替换`经度`和`纬度`为你希望地图显示的中心坐标。 3. 获取需要聚合的标记数据,并使用百度地图的`MarkerClusterer`类进行聚合。可以在`mounted`钩子函数中添加以下代码: ```javascript mounted() { // ... const markers = []; // 存储标记的数组 // 添加标记到地图和markers数组中 yourData.forEach((item) => { const point = new BMap.Point(item.lng, item.lat); const marker = new BMap.Marker(point); map.addOverlay(marker); markers.push(marker); }); // 创建聚合器并设置参数 const markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers, }); // ... } ``` 确保替换`yourData`为你的标记数据数组,每个标记的经度和纬度分别存储在`item.lng`和`item.lat`中。 4. 在Vue组件中添加地图容器的HTML代码。可以在组件模板中添加以下代码: ```html <template> <div id="map-container" style="width: 100%; height: 400px;"></div> </template> ``` 确保根据需要设置地图容器的宽度和高度。 通过以上步骤,你就可以在Vue项目中实现百度地图聚合效果了。记得在百度地图开放平台申请并获取到API密钥,并替换代码中的`YOUR_API_KEY`。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值