百度地图API之点聚合文字标签显示/隐藏

最新推荐文章于 2024-01-30 14:17:41 发布

没用の阿豪

最新推荐文章于 2024-01-30 14:17:41 发布

阅读量7k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_29099209/article/details/80222119

版权

前端专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1:html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap{width:100%;height:500px;}
		p{margin-left:5px; font-size:14px;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
	<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.js"></script>
	<title>点聚合</title>
</head>
<body>
	<div id="allmap"></div>
	<p>缩放地图，查看点聚合效果</p>
</body>
</html>

2:js

	// 百度地图API功能
	var mapInstance = new BMap.Map("allmap");
	mapInstance.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
	mapInstance.enableScrollWheelZoom();


	var MAX = 100;
	var markers = [];
	var pt = null;
	var i = 0;
    var dataList = new Array();
    var data  = new Array();
	for (; i < MAX; i++) {
      var lng = Math.random() * 40 + 85;
      var lat =Math.random() * 30 + 21;
	   pt = new BMap.Point(lng,lat);
	  
       data["latitude"]=lat;
       data['longitude']=lng;
       data['site_number']=i;
	   dataList[i]=data;     
	   markers.push(new BMap.Marker(pt));
	}
	//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
	var markerClusterer = new BMapLib.MarkerClusterer(mapInstance, {markers:markers});

   addLabel(dataList);
  var mapLabel = [];
function addLabel(dataList) { 
    mapInstance.addEventListener("zoomend", function () {
        managerLabel(dataList);
        console.log(3333);
    });
    mapInstance.addEventListener("dragend", function () {
        managerLabel(dataList);
        console.log(222);
    });


}
function managerLabel(dataList) {
      console.log(4444);
     console.log(dataList);
    for (var k in mapLabel) {
        mapInstance.removeOverlay(mapLabel[k]);
    }
    var allOverlay = mapInstance.getOverlays();
    var in_view = 0;
    for (var i in  allOverlay) {
        if (allOverlay[i].toString() == "[object Marker]") {
            // Find Worksite
            for (var j in dataList.sitesList) {
                if ((allOverlay[i].getPosition().lat == dataList[j]["latitude"]) &&
                    (allOverlay[i].getPosition().lng == dataList[j]['longitude'])) {
                    var point = new BMap.Point(dataList[j]['longitude'], dataList[j]["latitude"]);
                    var opts = {
                        position: point,    // 指定文本标注所在的地理位置
                        offset: new BMap.Size(-18, -35)    //设置文本偏移量
                    };
                    var label = new BMap.Label(dataList[j].site_number, opts);  // 创建文本标注对象
                    label.setStyle({
                        border: "none",
                        background: "none",
                        color: "black",
                        fontSize: "20px",
                        height: "20px",
                        lineHeight: "20px",
                        fontFamily: "微软雅黑"
                    });
                    mapLabel[in_view] = label;
                    in_view++;
                    mapInstance.addOverlay(label);
                }
            }
        }
    }
}