在做項目的時候需要用到聚合點 看完聚合點的時候有需要詳情
下面是效果
代碼
<!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=1.4"></script> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></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> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 4); map.enableScrollWheelZoom(); var myIcon2 = new BMap.Icon("tb1_0.png", new BMap.Size(30, 40)); var data = [{ "mapy": "32.94584", "mapx": "112.894350", "time": "12:30" }, { "mapy": "33.34683", "mapx": "112.694300", "time": "11:30" }, { "mapy": "33.54702", "mapx": "112.094380", "time": "10:30" }, { "mapy": "33.148780", "mapx": "116.494390", "time": "13:30" } ]; var markers = new Array(); $.each(data, function(i, item) { var point = new BMap.Point(item.mapx, item.mapy); var marker = new BMap.Marker(point); var content = item.time; addClickHandler(content, marker); //添加點擊事件 markers.push(marker); }); //添加聚合效果。 var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers}); var opts = { width : 250, // 信息窗口寬度 height: 80, // 信息窗口高度 title : "信息窗口" , // 信息窗口標題 enableMessage:true//設置允許信息窗發送短息 }; function addClickHandler(content,marker){ marker.addEventListener("click",function(e){ openInfo(content,e)} ); } function openInfo(content,e){ var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content,opts); // 創建信息窗口對象 map.openInfoWindow(infoWindow,point); //開啟信息窗口 }</script>