其他分享
首页 > 其他分享> > 高德地图上添加多个圆点标记及信息窗体

高德地图上添加多个圆点标记及信息窗体

作者:互联网

1.高德地图引入

<script type="text/javascript"
   src="https://webapi.amap.com/maps?v=1.4.15&key="您的key"&plugin=AMap.Geocoder">
</script>

2.根据地名获取经纬度(批量获取)

 var geocoder = new AMap.Geocoder({
     city: "全国", //城市设为北京,默认:“全国”
 }); 
 //address为地名数组
 //如:[甘肃省兰州市,河南省洛阳市,上海市]
 geocoder.getLocation(addresses, function (status,result) {
    if (status === "complete" && result.geocodes.length) {
       console.log(result.geocodes); //打印获取到的经纬度       
 });

3.根据获取到的经纬度,在地图上添加圆点标记及信息窗体

//信息窗体
 var infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -20),
 });
 //circleData是一个对象数组,内容包括经纬度及需要在信息窗体中显示的数据
  for (var i = 0; i < circleData.length; i += 1) {
            var center = circleData[i].center;
            //根据count的大小添加不同颜色及大小的圆
            if (circleData[i].count > 9) { 
              var circleRadius = 7;
              var circleColr = "#FF0000";
            } else if (circleData[i].count > 6 && circleData[i].count <= 9) { 
              var circleRadius = 6;
              var circleColr = "#FFA500";
            } else if (circleData[i].count > 3 && circleData[i].count <= 6) {
              var circleRadius = 5;
              var circleColr = "#FFFF00";
            } else if (circleData[i].count > 0 && circleData[i].count <= 3) {
              var circleRadius = 4;
              var circleColr = "#6A5ACD";
            }
            //圆点标记
            var circleCon = {
              center: center,
              radius: circleRadius, 
              strokeColor: "white",
              strokeWeight: 2, 
              fillColor: circleColr, 
              zIndex: 10,
              bubble: true,
              cursor: "pointer",
              clickable: true,
            };
            //将圆点标记添加到地图上
            var circleMarker = new AMap.CircleMarker(circleCon);  
            if(circleData[i].location==undefined){
              circleMarker.content=""
            }else{
            //信息窗体内容及点击事件
              circleMarker.content =
            '<div οnclick="getNewsMessage('+"'"+key+"'"+')">'+circleData[i].location +"<br/>" +"滑坡:" +circleData[i].hpCount +"<br/>" + "泥石流:" +circleData[i].nslCount'</div>'
            }
            //圆点标记的鼠标滑过事件
            circleMarker.on("mouseover", markerClick);
            circleMarker.emit("mouseover", { target: circleMarker });
            circleMarker.setMap(map); 
          }
          //圆点标记的点击事件
          function markerClick(e) {
           infoWindow.setContent(e.target.content);
           infoWindow.open(map, e.target.getCenter());
          } 

标签:count,circleMarker,圆点,circleRadius,窗体,var,高德,circleData
来源: https://blog.csdn.net/fdyputi/article/details/115489601