• 百度地图API 重新生成点聚合的功能


    百度点聚合用来解决加载大量点要素到地图上产生覆盖现象的问题,并提高性能。

    http://api.map.baidu.com/library/MarkerClusterer/1.2/docs/symbols/BMapLib.MarkerClusterer.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 { 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    		#allmap{100%;height:80%;}
    		#r-result{100%;}
    	</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>
    	<div id="r-result">
    		<input type="button" onclick="add_overlay();" value="添加点聚合" />
    		<input type="button" onclick="remove_overlay();" value="重新生成点聚合" />
    	</div>
    </body>
    </html>
    <script type="text/javascript">
    	// 百度地图API功能
    	var map = new BMap.Map("allmap");
    	map.centerAndZoom(new BMap.Point(116.404, 39.915), 4);
    	map.enableScrollWheelZoom();
    
    	var MAX = 10;
    	var markers = [];
    	var markerClusterer = null;
    	for (var i = 0; i < MAX; i++) {
    		var pt = new BMap.Point(Math.random()*40+85, Math.random()*30+21);
    		var marker = new BMap.Marker(pt);
    		map.addOverlay(marker);
    		markers.push(marker);
    	}
      
    	//最简单的用法,生成一个marker数组,然后调用markerClusterer类即可。
    	markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});  
    </script>
    


    实现两个按钮的功能,用于添加点聚合,和删除点聚合并重新加载新的点

    <!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 { 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    		#allmap{100%;height:80%;}
    		#r-result{100%;}
    	</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>
    	<div id="r-result">
    		<input type="button" onclick="add_overlay();" value="添加点聚合" />
    		<input type="button" onclick="remove_overlay();" value="重新生成点聚合" />
    	</div>
    </body>
    </html>
    <script type="text/javascript">
    	// 百度地图API功能
    	var map = new BMap.Map("allmap");
    	map.centerAndZoom(new BMap.Point(116.404, 39.915), 4);
    	map.enableScrollWheelZoom();
    
    	var MAX = 10;
    	var markers = [];
    	var markerClusterer = null;
    	for (var i = 0; i < MAX; i++) {
    		var pt = new BMap.Point(Math.random()*40+85, Math.random()*30+21);
    		var marker = new BMap.Marker(pt);
    		map.addOverlay(marker);
    		markers.push(marker);
    	}
      
    	function add_overlay(){
    		//最简单的用法,生成一个marker数组,然后调用markerClusterer类即可。
    		markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
    	}
    
    	function remove_overlay(){
    		for(var i=0; i<4; i++){
    			map.removeOverlay(markers[i]);
    		}
    		var markers1 = markers.slice(4,markers.length);
    		markerClusterer.clearMarkers();			//此步骤需要
    		markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers1});
    	}  
    </script>
    



  • 相关阅读:
    [原]写项目方案书的六字方针
    [原]简述Field,Attribute,Property的区别
    [原]Excel(电子表格)中的大写变成小写
    [原]滚动的图片或文字(有缝)
    [原]按字母索引(asp版)
    [原]sql语句上一篇,下一篇
    [原]选中行后高亮显示
    自定义报表开发、使用手册
    男人必须终身牢记的一句话
    在sqlplus中操作blob和clob
  • 原文地址:https://www.cnblogs.com/anyuan9/p/6171511.html
Copyright © 2020-2023  润新知