高德地图上添加多个圆点标记及信息窗体
作者:互联网
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