百度地图点聚合样式修改（BMapLib.MarkerClusterer）

最新推荐文章于 2024-05-18 15:32:42 发布
最新推荐文章于 2024-05-18 15:32:42 发布
阅读量7.3k 收藏 15
点赞数 4
分类专栏： js 百度地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_39626276/article/details/103710428
版权

找了很久都没人贴过这个，百度地图里点聚合的图标替换，官方文档也没有直接把这块贴出来，经过几番周折最终还是找到了，先上效果图（这是直接在官方的例子里做的，略丑）

实现方面先看看官方怎么说的：

然后找到TextIconOverlay：

虽然官方是写了怎么做，可以传个数组，这个不明白啊，难不成一个点要对应一个style？不能吧，我只需要所有的点样式一样就行，干嘛要每个点一个样式，最重要的是点聚合是又api自动聚合，我咋知道聚合后是多少个点，这样也没法做到一一对应啊，找了一会儿，找到了一个官方例子，下面是地址：

http://api.map.baidu.com/library

最低0.47元/天 解锁文章
何良语
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度地图图片标注实现点聚合，并修改点聚合样式
12-18
修改聚合样式，需要在js文件中找到../assets开头的图片链接，改为自己的本地链接。需要注意的是，链接不需要加.jpg或.png，需要那种格式，可以将后面变量改了就可以。js文件默认会在链接地址后面拼接0.jpg或0.png，只需要在图片名后加0就可以
百度地图markerClusterer.js优化版本
06-24
百度地图markerClusterer.js在别人修改聚集方式的基础上修改了，聚集点的点击事件,解决了大量marker时卡顿情况，并将聚集点的点击事件修改为:在以点击的marker为中心点，zoom视野距离扩大一级
百度地图更换定位点图标并展示label
最新发布
逆水行舟 不进则退
05-18 849
在百度地图上叠加marker数据时，坐标点样式展示对应商家的logo图标，并使用label展示商家的名称
BMapLib.MarkerClusterer
fuwei736349065的博客
07-21 4833
类 BMapLib.MarkerClusterer 用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能  源文件: MarkerClusterer.js. 包引用：     类 类 描述 BMapLib.MarkerClusterer(map, options) MarkerClusterer
百度地图聚合点new BMapLib.MarkerClusterer（）用法及map.clearOverlays()不能清除聚合点问题
热门推荐
lianzhang861的博客
08-03 2万+
时候是我们需要在地图上添加覆盖物，但如果数据太多可能出现这种情况 这种看起来总觉得不舒服（密集恐惧症） 所以可以换成用聚合点 一下子清爽了很多，聚合点放大后还是可以显示普通点。 用法代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&gt...
百度离线地图示例之五：点聚合
xiaoge_586的博客
02-18 1844
前言介绍： 主要是基于v3.0的API版本进行的离线，纯内网可操作，基本上实现了现有90%以上的功能点，能兼容jpg和png格式的瓦片图层，实现了原生和基于Vue两个版本，实现的功能点概要如下： 地图示例： 地图展示 同时加载两个地图 设置地图最大及最 小级别移动地图 缩放地图 拖拽地图 设置地图显示范围 获取地图显示范围 测距 地图控件： 工具条、比例尺控件 地图类型 缩略图控件 添加版权控件 添加自定义控件 覆盖物示例： 添加/删除覆盖物 折线上添加方向箭头 添加动画标注点 设置点的新图标 设
百度地图类库 聚合marker
04-29
总的来说，百度地图API的MarkerClusterer类库是处理大数据量地图标记的理想选择，它通过聚合策略优化了地图展示，同时也为开发者提供了丰富的自定义选项，使得地图应用在美观性和实用性上都能达到较高的水平。...
百度地图点聚合自定义样式
05-18
本文将深入探讨“百度地图点聚合自定义样式”这一主题，旨在帮助开发者更好地理解和实现在百度地图上自定义点聚合的样式。 点聚合是一种处理大量地图标记（points）的技术，当地图上的标记过于密集时，为了提高视觉...
百度地图聚合优化（markerclusterer.simple.js ）
05-13
修改原版JS 文件卡顿，耗时，吃内存的问题。新版聚合插件简版，没有放在BMap.BMapLib下，而是直接 import 进项目，new 出来就可以用。new MarkerClusterer( bmap, { markers: lnglat_Arr, iconUrl: iconUrl } )
MarkerClusterer_min.js,TextIconOverlay_min.js 百度地图聚合功能开发
11-28
MarkerClusterer_min.js,TextIconOverlay_min.js 百度地图聚合自定义聚合点样式必备js , 亲测可用, 刚实现相关功能
百度地图点位聚合卡顿问题、文本消失问题
treasurecp的博客
05-17 447
【代码】百度地图点位聚合卡顿问题、文本消失问题。
百度地图 车辆行驶轨迹，使用聚合点 实现轨迹展示，聚合点样式自定义和点击事件，图片旋转方向，
u013890784的博客
09-20 2001
1.获取第一个marker 里面的内容（坐标，图片旋转角度，车牌号 等信息）用来给聚合点做样式的时候使用。 2.,marker 自定义 3.addEventListener， addOverlay，MarkerClusterer， map.addEventListener("zoomend",(p.longitude,p.latitude)
百度地图 标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式
zthtt的博客
04-23 2443
一、问题 公司的项目中在百度地图上生成了成千上万的点，所以使用了标记聚合器MarkerClusterer来处理海量点，但是每个点根据异常类型，分为正常（绿色）和异常（红色），这时如果用了聚合器，只有没被聚合的时候才能看得出来是否异常，因此处理逻辑是，一个聚合如果包含一个及以上的异常点，则显示红色。不包含任何异常点就显示绿色图片效果如下： 缩小后 二、解决方案： 1、生成标记marker时，添加是否异常的属性值 let marker = new BMap.Marker(new BMap
百度地图 聚合点 简单用法
qq_42489210的博客
06-29 316
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min..
百度地图点聚合
weixin_37593409的博客
01-06 533
经测试，如果加载点数超多，页面打开缓慢。下载到本地会提高速度。
百度地图点聚合点击事件卡顿问题解决
qq_23447231的博客
09-14 1382
title: 百度地图点聚合点击事件卡顿问题解决。
百度地图点聚合（遇到问题）
Dyj_zf的博客
07-14 1438
2. 创建一个marker数组。
百度api BMapLib.MarkerClusterer 没有点击事件和鼠标事件嘛
04-01
根据官方文档，BMapLib.MarkerClusterer 没有提供点击事件和鼠标事件，但可以通过以下方法实现： 1. 使用BMapLib.MarkerClusterer的markerClusterer.addMarkers方法添加Marker时，给每个Marker添加点击事件或鼠标事件。 2. 使用BMapLib.MarkerClusterer的markerClusterer.getMarkers()方法获取所有聚合后的Marker，遍历每个Marker，给它们添加点击事件或鼠标事件。 以下是示例代码： ```javascript // 给每个Marker添加点击事件 var markers = [ new BMap.Marker(new BMap.Point(116.404, 39.915)), new BMap.Marker(new BMap.Point(116.404, 39.915)), new BMap.Marker(new BMap.Point(116.404, 39.915)) ]; markers.forEach(function(marker) { marker.addEventListener('click', function() { console.log('点击了Marker'); }); }); var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers }); // 遍历所有聚合后的Marker，给它们添加鼠标事件 var markers = [ new BMap.Marker(new BMap.Point(116.404, 39.915)), new BMap.Marker(new BMap.Point(116.404, 39.915)), new BMap.Marker(new BMap.Point(116.404, 39.915)) ]; var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers }); markerClusterer.getMarkers().forEach(function(marker) { marker.addEventListener('mouseover', function() { console.log('鼠标移入了Marker'); }); }); ``` 注意：以上代码仅供参考，具体实现还需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值