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

最新推荐文章于 2024-09-13 17:10:25 发布
最新推荐文章于 2024-09-13 17:10:25 发布
阅读量2.7k 收藏 4
点赞数 2
分类专栏： 技术文档 文章标签： javascript 前端 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ARLENE2/article/details/126177558
版权
本文介绍如何根据公司需求，在前后端混编项目中实现百度地图聚合点的自定义显示，包括修改聚合点的文字和样式。通过TextIconOverlay.js和MarkerClusterer.js的源码修改，实现了聚合点图片的定制以及文字内容的个性化设置。
摘要由CSDN通过智能技术生成

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

前言

基于公司的需求，需要实现一个热力图来根据接口数据显示不同站点最近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元/天 解锁文章
百度地图聚合之后文字显示样式问题
yczsss的博客
05-30 631
问题描述： 业务需求——使用百度地图聚合之后，样式显示。 这是百度地图的聚合 解决过程： 1、首先需要用到两个js文件，分别是TextIconOverlay.js（标记器样式的库文件），MarkerClusterer.js（聚合器的库文件）。TextIconOverlay.js地址：http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js。MarkerClusterer.js地址：http://
百度地图点聚合自定义样式
05-18
百度地图点聚合实现自定义样式。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
完美解决百度地图聚合中的marker添加label后移动、放大缩小时label消失的问题
05-27
完美解决百度地图聚合中的marker添加label后移动、放大缩小时label消失的问题，添加获取已经聚合点位的接口！
【Openlayers+百度地图】实现聚合点位、重复点位取消聚合、切换图层、点击弹框功能
最新发布
weixin_41027083的博客
09-13 1183
【Openlayers+百度地图】准确加载百度地图创建聚合图层、普通图层、切换图层以及点击弹框功能
百度地图点聚合的聚合点样式修改
sut_haohaoxuexi的博客
11-15 8799
百度地图提供点聚合的功能，但是聚合之后的样式不一定会满足我们的需要： 点聚合会用到百度自己写的js文件，分别是MarkerClusterer.js，以及TextIconOverlay.js，其中MarkerClusterer.js是实现点的聚合，TextIconOverlay.js是设置聚合点的样式， 在这里，需要修改TextIconOverlay.js这个文件，在TextIconOverla
百度地图点聚合及弹框的自定义样式
qq_39650950的博客
07-07 1084
<el-col :span="20" :xs="24"> <baidu-map class="map" :center="mapCenter" :zoom="mapZoom" :scroll-wheel-zoom="true" > <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale
百度地图图片标注实现点聚合，并修改点聚合样式
12-18
修改聚合样式，需要在js文件中找到../assets开头的图片链接，改为自己的本地链接。需要注意的是，链接不需要加.jpg或.png，需要那种格式，可以将后面变量改了就可以。js文件默认会在链接地址后面拼接0.jpg或0.png，只需要在图片名后加0就可以
百度地图-点聚合点修改样式/背景图/字体颜色
橙子yq的代码世界
09-26 1468
this.markerClusterer=new window.BMapLib.MarkerClusterer(map, { markers:markersArr, styles: [{ url: './img/person-icon.png', size: new window.BMap.Size(50, 50), textColor: '#f04c0b' }] })
百度地图中自定义点聚合实现
热门推荐
Vanilla1119的博客
04-02 1万+
百度地图中自定义点聚合实现 点聚合 （MarkerClusterer 标记聚合器）用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能。 点聚合的实现原理是按照以某点为中心的正方形作为区域，把此区域的点聚合在一个点上，并随着地图比例尺改变此点区域大小，同时改变聚合点的数量。 默认百度地图的聚合marker效果如下： 官方聚合示例：http://lbsyun.baidu.com/jsdemo...
百度地图聚合点样式自定义
09-10
百度地图聚合点样式自定义是指开发者可以针对百度地图API中的聚合功能，如MarkerCluster（标记点聚类），按照自己的需求定制每个聚合点的外观和展示效果。这包括改变点的形状、大小、颜色、图标，甚至添加文字标签等...
百度地图类库 自定义覆盖物
04-29
除了TextIconOverlay，百度地图API还提供了多种内置的覆盖物类型，如Marker（标记）、Polygon（多边形）、Circle（圆形）等，以及自定义覆盖物的能力，允许开发者通过JavaScript实现更复杂的地图功能。 在压缩包...
百度地图修改点汇聚样式（JS地图）
牟云飞的博客
05-15 4835
javascript版百度地图进行点汇聚并更改样式，引入百度开源类库TextIconOverlay_min.js和MarkerClusterer_min.js，使用BMapLib.MarkerClusterer(map, options)进行点聚合： BMapLib.MarkerClusterer(map, options) MarkerClusterer 参数:{M
百度地图自定义聚合点方法拓展
HELLO WORLD
12-19 3427
介绍 这是一个百度地图自定义聚合样式和图层控制拓展方法的API。 在百度官方版本的基础上拓展了自定义方法，具体见下方说明。 拓展方法说明 MarkerClusterer.js 增加属性 type {Number} 自定义类型，用于方便控制隐藏和显示 name {String} 自定资源名称，用于方便控制隐藏和显示 markerControl {Boolean} 是否需要控制maker显示/隐...
js 百度地图点聚合 自定义标注 自定义信息框
m0_71792040的博客
07-24 409
【代码】js 百度地图点聚合 自定义标注 自定义信息框。
百度地图 车辆行驶轨迹，使用聚合点 实现轨迹展示，聚合点样式自定义和点击事件，图片旋转方向，
u013890784的博客
09-20 2162
1.获取第一个marker 里面的内容（坐标，图片旋转角度，车牌号 等信息）用来给聚合点做样式的时候使用。 2.,marker 自定义 3.addEventListener， addOverlay，MarkerClusterer， map.addEventListener("zoomend",(p.longitude,p.latitude)
【Java转Android】60(1)
2301_77110605的博客
04-05 605
我见过很多技术leader在面试的时候，遇到处于迷茫期的大龄程序员，比面试官年龄都大。这些人有一些共同特征：可能工作了5、6年，还是每天重复给业务部门写代码，工作内容的重复性比较高，没有什么技术含量的工作。问到这些人的职业规划时，他们也没有太多想法。其实30岁到40岁是一个人职业发展的黄金阶段，一定要在业务范围内的扩张，技术广度和深度提升上有自己的计划，才有助于在职业发展上有持续的发展路径，而不至于停滞不前。不断奔跑，你就知道学习的意义所在！
百度地图 标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式
zthtt的博客
04-23 2637
一、问题 公司的项目中在百度地图上生成了成千上万的点，所以使用了标记聚合器MarkerClusterer来处理海量点，但是每个点根据异常类型，分为正常（绿色）和异常（红色），这时如果用了聚合器，只有没被聚合的时候才能看得出来是否异常，因此处理逻辑是，一个聚合如果包含一个及以上的异常点，则显示红色。不包含任何异常点就显示绿色图片效果如下： 缩小后 二、解决方案： 1、生成标记marker时，添加是否异常的属性值 let marker = new BMap.Marker(new BMap
百度地图采用MarkerClusterer生成聚合点，解决海量点造成地图卡顿的问题
zthtt的博客
04-22 5397
一、问题 最近在做公司的一个项目，需要在百度地图生成海量点，最开始只是把全部的marker一起显示到地图上，因为一次生成的点比较多，会发生地图卡顿等问题； 二、解决方案：MarkerClusterer 百度地图-JS API官方文档 MarkerClusterer：多标注聚合器。此工具解决加载大量点要素到地图上造成缓慢，且产生覆盖现象的问题。 步骤： 1、在html文件中引入MarkerClusterer_min.js 、 TextIconOverlay_min.js 文件 MarkerClustere
android开发百度地图点聚合功能
饮水思源
04-19 370
第一次写博客。。。也不知道怎么写呢。就按照我实现功能的步骤来写吧！ 参考百度地图demo点聚合功能代码 private ClusterManager<MyItem> mClusterManager; // 定义点聚合管理类ClusterManager mClusterManager = new ClusterManager<MyItem>(this,...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值