自定义百度地图聚合点的显示文字以及显示的样式

最新推荐文章于 2024-02-29 12:00:28 发布
VIP文章 最新推荐文章于 2024-02-29 12:00:28 发布
阅读量2.4k 收藏 4
点赞数 2
分类专栏： 技术文档 文章标签： javascript 前端 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ARLENE2/article/details/126177558
版权

自定义百度地图聚合点的显示文字以及显示的样式

前言

基于公司的需求，需要实现一个热力图来根据接口数据显示不同站点最近30天的乘车人次分布，采用百度地图的点聚合方法可以实现这一需求，但是要求点聚合后显示的文字和样式需要修改，所以就在这里记录一下如何修改（前后端混编项目）。

1. 地图展示

在这里插入图片描述

代码实现：
TextIconOverlay.js

MarkerClusterer.js

自定义聚合点显示文字和样式需要修改百度地图提供的TextIconOverlay.js和MarkerClusterer.js，可以拷贝源码到本地再导入

<div class="tab-content">
	<div class="tab-pane active animated fadeIn">
		<div class="panel-body cw-panel-body">
			<div class="row cw_export" id="view_tab_type">
				<div class="col-lg-12">
					<div class="cw_fw_bolder">
						<div style="font-size: 18px;color: #0C0C0C;font-weight: 400;">最近30天站点乘车人次分布图</div>
						<div class="point-map-line wrap-point-map" style="border: 2px solid #000;">
							<div class="point-map" id="point_map"></div>
							<div class="map-control-tool" id="wrap_point_map_control"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="/public/theme/INSPINIA/js/jquery.page.js?20190121"></script>
<script src="//api.map.baidu.com/api?v=2.0&ak=b2tdmZtPCKfwW8iwn5svaT03"></script>
<script type="text/javascript" src="/public/web/js/TextIconOverlay.js"></script>
<script type="text/javascript" src="/public/web/js/MarkerClusterer.js"></script>
<script type="text/javascript">
    $(function () {
   
        getPointsData();
        (function setHeight() {
   
            // 设置地图高度
            var _height = $(window).height() || 0;
            var _barHeight = $('#navbar').height() || 0;
            if (_height) {
   
                if (_barHeight) {
   
                    $("#point_map").height(_height - _barHeight - 200);
                } else {
   
                    $("#point_map").height(_height - 200);
                }
            }
        }());
    });

    /*标签*/
    function createLable(map, point, content) {
   
        var pointMap = new BMap.Map('point_map');
        var opts = {
   
            position: point,
            offset: new BMap.Size(-5, 10)
        }
        var label = new BMap.Label(content, opts);
        label.setStyle({
   
            color: "#000",
            border: "0px",
            backgroundColor: "0.000000000001", //通过这个方法，去掉背景色
            fontSize: "12px",
            height: "20px",
            lineHeight: "20px"
        });
        pointMap.addOverlay(label);
        return label;
    }

    // 调用接口数据
    function getPointsData() {
   
        $.ajax({
   
            url: '/index.php/dudubashi/enterprise/get_enterprise_hot_line',
            type: 'POST',
            dataType: 'json',
            data: '',
            success: function(data) {
   
                if (data.result == '0000') {
   
                    // 创建地图实例
                    var pointMap = new BMap.Map('point_map');

                    var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件
                    pointMap.addControl(scaleCtrl);
                    var NavigationControl = new BMap.NavigationControl();  // 添加平移缩放控件
                    pointMap.addControl(NavigationControl);

                    // pointMap.centerAndZoom(new BMap.Point(data.data[0].lng, data.data[0].lat), 12);
                    pointMap.centerAndZoom(new BMap.Point(113.90, 22.57), 13);
                    pointMap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

                    var markers = [];
                    var pt = null;
                    // 创建小车图标
                    var myIcon = new BMap.Icon("/public/web/images/m0.png", new BMap.Size(55, 55));
                    var contentFirst,contentSecond;
                    for (var i = 0; i < data.data.length; i++) {
   
                        pt = new BMap.Point(data.data[i].lng, data.data[i].lat)

                        var marker = new BMap.Marker(pt,{
   icon: myIcon})
                        markers.push(marker);
                        markers[i].customData = {
    number: data.data[i].count }
                        var optsFirst = {
   
                            position: markers[i].point, // 指定文本标注所在的地理位置
                            offset: new BMap.Size(15, 18) // 设置文本偏移量
                        };
                        contentFirst = markers[i].customData.number; // 站点人数
                        contentSecond = data.data[i].title; // 站点名称 
                        var labelFirst = new BMap.Label('<span style="display: inline-block;width: 50px;text-align: center;margin-left: -14px;">'+contentFirst+'</span>'+'<p></p>'+'<span style="margin-left: -25px;display: inline-block;width: 80px;text-align: center;">'+contentSecond+'</span>', optsFirst);
                        labelFirst.setStyle({
   
                            background: 'none',
                            color: 'black',
                            fontWeight: 'bold',
                            borderRadius: "10px",
                            fontSize: "12px",
                            lineHeight: "20px",
                            border :"0",
                            top: "17px",
                            transform:'translateX(-50%)'
                        });
                        marker.setLabel(labelFirst);
                    }

                    // 聚合点自定义样式
                    // var EXAMPLE_URL = "http://api.map.baidu.com/library/MarkerClusterer/1.2/examples/";
                    // if ()
                    // var myStyles = [{
   
                    //     url: '/public/web/images/m0.png',
                    //     size: new BMap.Size(55, 55),
                    //     opt_anchor: [16, 0],
                    //     textColor: '#333',
                    //     opt_textSize: 10
                    // }];

                    //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
                    var markerClusterer = new BMapLib.MarkerClusterer(pointMap, {
   markers:markers});

                    // 聚合点自定义样式
                    // markerClusterer.setStyles(myStyles);
                } else {
   
                    swal(data.info);
                }
            }
        });
    }
</script>
2. TextIconOverlay.js
/**
 * @fileoverview 此类表示地图上的一个覆盖物，该覆盖物由文字和图标组成，从Overlay继承。
 * 主入口类是<a href="symbols/BMapLib.TextIconOverlay.html">TextIconOverlay</a>，
 * 基于Baidu Map API 1.2。
 *
 * @author Baidu Map Api Group 
 * @version 1.2
 */
 

 /** 
 * @namespace BMap的所有library类均放在BMapLib命名空间下
 */
  var BMapLib = window.BMapLib = BMapLib || {
   };

  (function () {
   
     
      /**
       * 声明baidu包
       */
      var T,
      baidu = T = baidu || {
   version: "1.3.8"}; 
     
      (function (){
   
          //提出guid，防止在与老版本Tangram混用时
          //在下一行错误的修改window[undefined]
          baidu.guid = "$BAIDU$";
  
          //Tangram可能被放在闭包中
          //一些页面级别唯一的属性，需要挂载在window[baidu.guid]上
          window[baidu.guid] = window[baidu.guid] || {
   };
  
          /**         
          * @ignore
          * @namespace baidu.dom 操作dom的方法。
          */
          baidu.dom = baidu.dom || {
   };
      
          
          /**
           * 从文档中获取指定的DOM元素
           * @name baidu.dom.g
           * @function
           * @grammar baidu.dom.g(id)
           * @param {string|HTMLElement} id 元素的id或DOM元素
           * @shortcut g,T.G
           * @meta standard
           * @see baidu.dom.q
           *             
           * @returns {HTMLElement|null} 获取的元素，查找不到时返回null,如果参数不合法，直接返回参数
           */
          baidu.dom.g = function (id) {
   
              if ('string' == typeof id || id instanceof String) {
   
                  return document.getElementById(id);
              } else if (id && id.nodeName && (id.nodeType == 1 || id.nodeType == 9)) {
   
                  return id;
              }
              return null;
          };
  
          // 声明快捷方法
          baidu.g = baidu.G = baidu.dom.g;
  
          /**
           * 获取目标元素所属的document对象
           * @name baidu.dom.getDocument
           * @function
           * @grammar baidu.dom.getDocument(element)
           * @param {HTMLElement|string} element 目标元素或目标元素的id
           * @meta standard
           * @see baidu.dom.getWindow
           *             
           * @returns {HTMLDocument} 目标元素所属的document对象
           */
          baidu.dom.getDocument = function (element) {
   
              element = baidu.dom.g(element);
              return element.nodeType == 9 ? element : element.ownerDocument || element.document;
          };
  
          /**
             * @ignore
           * @namespace baidu.lang 对语言层面的封装，包括类型判断、模块扩展、继承基类以及对象自定义事件的支持。
          */
          baidu.lang = baidu.lang || {
   };
  
          /**
           * 判断目标参数是否string类型或String对象
           * @name baidu.lang.isString
           * @function
           * @grammar baidu.lang.isString(source)
           * @param {Any} source 目标参数
           * @shortcut isString
           * @meta standard
           * @see baidu.lang.isObject,baidu.lang.isNumber,baidu.lang.isArray,baidu.lang.isElement,baidu.lang.isBoolean,baidu.lang.isDate
           *             
           * @returns {boolean} 类型判断结果
           */
          baidu.lang.isString = function (source) {
   
              return '[object String]' == Object.prototype.toString.call(source);
          };
  
          // 声明快捷方法
          baidu.isString = baidu.lang.isString;
  
          /**
           * 从文档中获取指定的DOM元素
           * **内部方法**
           * 
           * @param {string|HTMLElement} id 元素的id或DOM元素
           * @meta standard
           * @return {HTMLElement} DOM元素，如果不存在，返回null，如果参数不合法，直接返回参数
           */
          baidu.dom._g = function (id) {
   
              if (baidu.lang.isString(id)) {
   
                  return document.getElementById(id);
              }
              return id;
          };
  
          // 声明快捷方法
          baidu._g = baidu.dom._g;
  
          /**
           * @ignore
           * @namespace baidu.browser 判断浏览器类型和特性的属性。
           */
          baidu.browser = baidu.browser || {
   };
  
          if (/msie (\d+\.\d)/i.test(navigator.userAgent)) {
   
              //IE 8下，以documentMode为准
              //在百度模板中，可能会有$，防止冲突，将$1 写成 \x241
              /**
               * 判断是否为ie浏览器
               * @property ie ie版本号
               * @grammar baidu.browser.ie
               * @meta standard
               * @shortcut ie
               * @see baidu.browser.firefox,baidu.browser.safari,baidu.browser.opera,baidu.browser.chrome,baidu.browser.maxthon 
               */
             baidu.browser.ie = baidu.ie = document.documentMode || + RegExp['\x241'];
          }
  
          /**
           * 获取目标元素的computed style值。如果元素的样式值不能被浏览器计算，则会返回空字符串（IE）
           *
           * @author berg
           * @name baidu.dom.getComputedStyle
           * @function
           * @grammar baidu.dom.getComputedStyle(element, key)
           * @param {HTMLElement|string} element 目标元素或目标元素的id
           * @param {string} key 要获取的样式名
           *
           * @see baidu.dom.getStyle
           *             
           * @returns {string} 目标元素的computed style值
           */
  
          baidu.dom.getComputedStyle = function(element, key){
   
              element = baidu.dom._g(element);
              var doc = baidu.dom.getDocument(element),
                  styles;
              if (doc.defaultView && doc.defaultView.getComputedStyle) {
   
                  styles = doc.defaultView.getComputedStyle(element, null);
                  if (styles) {
   
                      return styles[key] || styles.getPropertyValue(key);
                  }
              }
              return ''; 
          };
  
          /**
           * 提供给setStyle与getStyle使用
           */
          baidu.dom._styleFixer = baidu.dom._styleFixer || {
   };
  
          /**
           * 提供给setStyle与getStyle使用
           */
          baidu.dom._styleFilter = baidu.dom._styleFilter || [];
  
          /**
           * 为获取和设置样式的过滤器
           * @private
           * @meta standard
           */
          baidu.dom._styleFilter.filter = function (key, value, method) {
   
              for (var i = 0, filters = baidu.dom._styleFilter, filter; filter = filters[i]; i++) {
   
                  if (filter = filter[method]) {
   
                      value = filter(key, value);
                  }
              }
              return value;
          };
  
          /**
             * @ignore
           * @namespace baidu.string 操作字符串的方法。
           */
          baidu.string = baidu.string || {
   };
  
          /**
           * 将目标字符串进行驼峰化处理
           * @name baidu.string.toCamelCase
           * @function
           * @grammar baidu.string.toCamelCase(source)
           * @param {string} source 目标字符串
           * @remark
           * 支持单词以“-_”分隔
           * @meta standard
           *             
           * @returns {string} 驼峰化处理后的字符串
           */
          baidu.string.toCamelCase = function (source) {
   
              //提前判断，提高getStyle等的效率 thanks xianwei
              if (source.indexOf('-') < 0 && source.indexOf('_') < 0) {
   
                  return source;
              }
              return source.replace(/[-_][^-_]/g, function (match) {
   
                  return match.charAt(1).toUpperCase();
              });
          };
  
          /**
           * 获取目标元素的样式值
           * @name baidu.dom.getStyle
           * @function
           * @grammar baidu.dom.getStyle(element, key)
           * @param {HTMLElement|string} element 目标元素或目标元素的id
           * @param {string} key 要获取的样式名
           * @remark
           * 
           * 为了精简代码，本模块默认不对任何浏览器返回值进行归一化处理（如使用getStyle时，不同浏览器下可能返回rgb颜色或hex颜色），也不会修复浏览器的bug和差异性（如设置IE的float属性叫styleFloat，firefox则是cssFloat）。<br />
           * baidu.dom._styleFixer和baidu.dom._styleFilter可以为本模块提供支持。<br />
           * 其中_styleFilter能对颜色和px进行归一化处理，_styleFixer能对display，float，opacity，textOverflow的浏览器兼容性bug进行处理。	
           * @shortcut getStyle
           * @meta standard
           * @see baidu.dom.setStyle,baidu.dom.setStyles, baidu.dom.getComputedStyle
           *             
           * @returns {string} 目标元素的样式值
           */
          baidu.dom.getStyle = function (element, key
最低0.47元/天 解锁文章
林卤蛋
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
百度地图图片标注实现点聚合，并修改点聚合样式
12-18
修改聚合样式，需要在js文件中找到../assets开头的图片链接，改为自己的本地链接。需要注意的是，链接不需要加.jpg或.png，需要那种格式，可以将后面变量改了就可以。js文件默认会在链接地址后面拼接0.jpg或0.png，只需要在图片名后加0就可以
百度地图修改点汇聚样式（JS地图）
牟云飞的博客
05-15 4742
javascript版百度地图进行点汇聚并更改样式，引入百度开源类库TextIconOverlay_min.js和MarkerClusterer_min.js，使用BMapLib.MarkerClusterer(map, options)进行点聚合： BMapLib.MarkerClusterer(map, options) MarkerClusterer 参数:{M
vue3使用百度地图实现个性化地图和轨迹
最新发布
Dnn01的博客
02-29 849
vue3使用百度地图实现个性化地图和轨迹
百度地图markerClusterer.js优化版本
06-24
百度地图markerClusterer.js在别人修改聚集方式的基础上修改了，聚集点的点击事件,解决了大量marker时卡顿情况，并将聚集点的点击事件修改为:在以点击的marker为中心点，zoom视野距离扩大一级
高德地图自定义点聚合图片
04-26
Android 高德地图自定义点聚合marker图片及Overlay点击选中功能的代码实现及布局文件
获取百度地图聚合点下面的相同数据
05-08
通过点击百度聚合点markerClusterer的时候画一个圆，然后判断重复的数据点是否在圆里面，然后获取重复的点的数据
百度地图 标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式
zthtt的博客
04-23 2307
一、问题 公司的项目中在百度地图上生成了成千上万的点，所以使用了标记聚合器MarkerClusterer来处理海量点，但是每个点根据异常类型，分为正常（绿色）和异常（红色），这时如果用了聚合器，只有没被聚合的时候才能看得出来是否异常，因此处理逻辑是，一个聚合如果包含一个及以上的异常点，则显示红色。不包含任何异常点就显示绿色图片效果如下： 缩小后 二、解决方案： 1、生成标记marker时，添加是否异常的属性值 let marker = new BMap.Marker(new BMap
百度地图聚合之后文字显示样式问题
yczsss的博客
05-30 549
问题描述： 业务需求——使用百度地图聚合之后，样式显示。 这是百度地图的聚合 解决过程： 1、首先需要用到两个js文件，分别是TextIconOverlay.js（标记器样式的库文件），MarkerClusterer.js（聚合器的库文件）。TextIconOverlay.js地址：http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js。MarkerClusterer.js地址：http://
百度地图自定义聚合点方法拓展
HELLO WORLD
12-19 3248
介绍 这是一个百度地图自定义聚合样式和图层控制拓展方法的API。 在百度官方版本的基础上拓展了自定义方法，具体见下方说明。 拓展方法说明 MarkerClusterer.js 增加属性 type {Number} 自定义类型，用于方便控制隐藏和显示 name {String} 自定资源名称，用于方便控制隐藏和显示 markerControl {Boolean} 是否需要控制maker显示/隐...
百度地图点聚合（遇到问题）
Dyj_zf的博客
07-14 1133
2. 创建一个marker数组。
百度地图MarkerClusterer点过多时卡顿问题
qq_45838048的博客
05-18 588
1.将注释位置分离出来重新给cluster类加一个方法，计算完成后在进行操作。问题原因：由于百度地图不断渲染DOM的原因导致点过多时，会出现地图卡顿问题。如代码所示，注释位置正是罪魁祸首，会在创建marker时不断渲染DOM。最后附上修改后的源码，可直接复制使用。
百度地图点聚合自定义样式
05-18
百度地图点聚合实现自定义样式。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
MarkerClusterer_min.js,TextIconOverlay_min.js 百度地图聚合功能开发
11-28
MarkerClusterer_min.js,TextIconOverlay_min.js 百度地图聚合自定义聚合点样式必备js , 亲测可用, 刚实现相关功能
百度地图
以梦为马——书到今生读已迟
07-05 250
// map.enableScrollWheelZoom(); //// var point = new BMap.Point(116.404, 39.915); // map.centerAndZoom(city_name, 13); // var max=0; // var min=10000; // var
百度地图 车辆行驶轨迹，使用聚合点 实现轨迹展示，聚合点样式自定义和点击事件，图片旋转方向，
u013890784的博客
09-20 1523
1.获取第一个marker 里面的内容（坐标，图片旋转角度，车牌号 等信息）用来给聚合点做样式的时候使用。 2.,marker 自定义 3.addEventListener， addOverlay，MarkerClusterer， map.addEventListener("zoomend",(p.longitude,p.latitude)
百度地图添加文本标注显示文字
qq_43651168的博客
04-20 2802
百度地图添加文本标注、百度地图添加Label标注、百度地图给Label标注去掉背景颜色、百度地图通过鼠标移入Marker控制Label的显示与隐藏
高德地图js API实现多点标记marker，多点marker移除和鼠标滑入标点显示提示框
热门推荐
zk_1325572803的博客
03-25 1万+
官方API：https://lbs.amap.com/api/javascript-api/guide/abc/prepare 先说下需求吧，我就不往外一段一段的摘了： 分全部和三家运营商，按钮点击，地图中的标点变化 鼠标移入标点，显示此标点的详细信息 比如这样（样式不好看，后期大家自己调吧） 1、加载高德脚本 <!-- 加载地图JSAPI脚本 --> <script src...
百度地图点聚合MarkerClusterer性能优化
gys9895的博客
01-07 653
百度地图点聚合MarkerClusterer性能优化 vue中引入百度地图：一个小白的vue插件探索之路 vue 使用百度地图常用的一些功能
vue2实现高德地图 JSAPI 2.0海量点标记(标注和标注图层)-＞自定义点位-＞定时刷新点位
qq_31745863的博客
05-11 2873
1. 需要修改`securityJsCode`和`key`为自己的 2. `allowCollision`为标注是否避让marker,默认为false不避让 3. `markers`为地图上的标记数组 4. `layer`为一个标注层,可以理解为一个图层 5. 流程其实就是将`markers`装载到`layer`再将`layer`装载到map就可以实现了
百度地图 聚合点点击事件
10-15
好的，关于百度地图聚合点的点击事件，您可以通过以下步骤实现： 1. 首先，需要在地图上添加聚合点。可以使用百度地图提供的API，例如MarkerClusterer库。 2. 在添加聚合点时，可以为每个聚合点设置一个唯一的标识符，例如id。 3. 接下来，可以使用百度地图提供的事件监听器，例如BMapLib.MarkerClusterer库中的addMarkerListener方法，为聚合点添加点击事件监听器。 4. 在点击事件监听器中，可以获取到当前点击的聚合点的id，并根据id进行相应的操作。 下面是一个简单的示例代码： ``` // 创建地图实例 var map = new BMap.Map("container"); // 添加聚合点 var markers = [ {lng: 116.404, lat: 39.915, id: 1}, {lng: 116.404, lat: 39.925, id: 2}, {lng: 116.414, lat: 39.915, id: 3}, {lng: 116.414, lat: 39.925, id: 4} ]; var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers}); // 添加聚合点点击事件监听器 markerClusterer.addMarkerListener(function(marker){ var id = marker.getExtData().id; // 根据id进行相应的操作 }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值