高德地图点聚合，点聚合点击事件，单点点击事件_高德地图点聚合点击资源-CSDN文库

共3个文件

png：2个

html：1个

高德地图

点击事件

信息窗体

多点点击事件

1星需积分: 48 144 浏览量 2018-06-06 11:27:48 上传评论 2 收藏 488KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

点聚合高德.zip （3个子文件）

点聚合高德

dianjuhe.html 5KB

dianjuhechaungti.png 278KB

dianjuhe.png 207KB

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>点聚合</title> <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> <script src="http://webapi.amap.com/maps?v=1.4.6&key=自己的key值&plugin=AMap.MarkerClusterer"></script> <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> </head> <body> <div id="container"></div> <div class="button-group"> <input type="button" class="button" value="默认样式" id="add0" onclick = 'addCluster(0)'/>   </div> <script src="http://a.amap.com/jsapi_demos/static/china.js"></script> <script> var cluster, markers = []; var map = new AMap.Map("container", { resizeEnable: true, center:[105,34], zoom: 4 }); for(var i=0;i<points.length;i+=1){ markers.push(new AMap.Marker({ position:points[i]['lnglat'], content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>', offset: new AMap.Pixel(-15,-15) })) markers[i].code="1111"; markers[i].on('click', markerClick); } var count = markers.length; var _renderCluserMarker = function (context) { var factor = Math.pow(context.count/count,1/18) var div = document.createElement('div'); var Hue = 180 - factor* 180; var bgColor = 'hsla('+Hue+',100%,50%,0.7)'; var fontColor = 'hsla('+Hue+',100%,20%,1)'; var borderColor = 'hsla('+Hue+',100%,40%,1)'; var shadowColor = 'hsla('+Hue+',100%,50%,1)'; div.style.backgroundColor = bgColor var size = Math.round(30 + Math.pow(context.count/count,1/5) * 20); div.style.width = div.style.height = size+'px'; div.style.border = 'solid 1px '+ borderColor; div.style.borderRadius = size/2 + 'px'; div.style.boxShadow = '0 0 1px '+ shadowColor; div.innerHTML = context.count; div.style.lineHeight = size+'px'; div.style.color = fontColor; div.style.fontSize = '14px'; div.style.textAlign = 'center'; context.marker.setOffset(new AMap.Pixel(-size/2,-size/2)); context.marker.setContent(div) } addCluster(0);//调用默认样式 function addCluster(tag) { if (cluster) { cluster.setMap(null); } if (tag == 2) {//完全自定义 cluster = new AMap.MarkerClusterer(map,markers,{ gridSize:80, renderCluserMarker:_renderCluserMarker }); } else if (tag == 1) {//自定义图标 var sts = [{ url: "http://a.amap.com/jsapi_demos/static/images/blue.png", size: new AMap.Size(32, 32), offset: new AMap.Pixel(-16, -16) }, { url: "http://a.amap.com/jsapi_demos/static/images/green.png", size: new AMap.Size(32, 32), offset: new AMap.Pixel(-16, -16) }, { url: "http://a.amap.com/jsapi_demos/static/images/orange.png", size: new AMap.Size(36, 36), offset: new AMap.Pixel(-18, -18) },{ url: "http://a.amap.com/jsapi_demos/static/images/red.png", size: new AMap.Size(48, 48), offset: new AMap.Pixel(-24, -24) },{ url: "http://a.amap.com/jsapi_demos/static/images/darkRed.png", size: new AMap.Size(48, 48), offset: new AMap.Pixel(-24, -24) }]; cluster = new AMap.MarkerClusterer(map, markers, { styles: sts, gridSize:80 }); } else {//默认样式 cluster = new AMap.MarkerClusterer(map, markers,{gridSize:80,zoomOnClick:false});//zoomOnclick false点击点聚合点不散开 cluster.on('click', clickdj);///点聚合绑定点击事件 } } function clickdj(e){//点击事件具体操作 if(e.markers.length>10){//控制点聚合能在多少个点点击 alert("请在十个点内点击！") }else { openInfo(e.markers); infoWindow.open(map, e.lnglat); } } function openInfo(e) { //构建信息窗体中显示的内容 var info = []; for(var i=0;i<e.length;i++) { var locationname = e[i].code; info.push("<a onclick='markerListClick(\""+e[i].code+"\",\""+e[i].code+"\")'>"+locationname+"</a><br/>");//添加了点击事件可以自己写具体内容 } infoWindow = new AMap.InfoWindow({ content: info.join("<br/>") //使用默认信息窗体框样式，显示信息内容 }); infoWindow.open(map, map.getCenter()); } function markerListClick(code) { alert(code); } function markerClick(e) { alert(e.target.code); } </script> </body> </html>

评论收藏

内容反馈