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

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());
          } 
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值