项目需求:
1 根据左侧类型是否勾选,在地图上动态呈现该类型的图标数据;
2 点击每个marker点坐标弹出相对应信息数据;
备注:由于类型较多,单个类型数据量较多,采用聚合点效果,根据是否选中,动态在地图里进行追加marker点图标;
一: 引入
二: 定义全局对象
聚合点对象
var juheAll = {
clusterHjd:[];
}
marker点数据
var markerAll = {
jyzhan:[];
}
三: 拿到将要遍历的数据
var list = [{lng:'',lat:'',name:''},{},{}];
四: 点击左侧check框,判断是否选中
function selectCheck(arr,type){
if(type == "救援站"){
arr.checked?fireStart(true):fireStart(false)
}
}
五: 运行遍历方法
fucntion fireStart(type){
//根据type判断是勾选还是取消勾选
if(type){
//清空markerAll对象中存储的marker点数据、聚合点数据
markerAll.jyzhan = [];
juheAll.clusterHjd = [];
let title = "救援站信息";
let xfData = list;
if(xfData.length>0){
xfData.forEach(item => {
if(!item.lng || !item.lat){ return }//如果经纬度错误则停止(不严谨,此处可以再进行优化)
//定义数据
let contentHTML = {};
contentHTML.name = item.name;
.....
let marker = new AMap.Marker({
map: map,
position: [contentHTML.lng, contentHTML.lat],
icon: new AMap.Icon({image: '', imageSize: new AMap.Size(30, 30)}),
offset: new AMap.Pixel(-15,-15)
});
//追加到markerAll对象数组中
markerAll.jyzhan.push(marker);
//鼠标点击marker弹出自定义的信息窗体
AMap.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker.getPosition());
});
let infoWindow = new AMap.InfoWindow({
isCustom: true,
content: createInfoWindow(title, contentHTML),
offset: new AMap.Pixel(16, -15)
});
//构建自定义窗体
function createInfoWindow(title, content) {
let inf = document.createElement("div");
inf.className = "amap-icon1"
//头部
var head = document.createElement("div");
head.className = "amap-icon-head";
head.innerHTML = title;
inf.appendChild(head);
//身体
var body = document.createElement("div");
body.className = "amap-icon-body";
var span0 = document.createElement("span"); //类型
var span1 = document.createElement("span"); //所属街道
var span2 = document.createElement("span"); //所属大队
var span3 = document.createElement("span"); //中队名称
var span4 = document.createElement("span"); //防火员 防火员电话
var span5 = document.createElement("span"); //负责人 负责人电话
var span6 = document.createElement("span"); //中队地址
span1.innerHTML = '所属街道:' + content.streetName;
span2.innerHTML = '所属大队:' + content.ddname;
span3.innerHTML = '名称:' + content.name;
span4.innerHTML = '防火员:' + content.firemanId + ' ' + content.firemanPhone;
span5.innerHTML = '负责人:' + content.zgName + ' ' + content.zgPhone;
span6.innerHTML = '地址:' + content.address;
body.appendChild(span1)
body.appendChild(span2)
body.appendChild(span3)
body.appendChild(span4)
body.appendChild(span5)
body.appendChild(span6)
inf.appendChild(body);
//尾部
var bottom = document.createElement("div");
var bottom_content = document.createElement("div");
var bottom_button = document.createElement("input");
bottom.className = "amap-icon2";
bottom_content.className = "amap-icon-buttom";
bottom_button.className = "btn-background";
bottom_button.type = "button";
bottom_button.value = "关闭";
bottom_button.onclick = closeInfoWindow;
bottom_content.appendChild(bottom_button);
bottom.appendChild(bottom_content);
inf.appendChild(bottom);
var sharp = document.createElement("img");
sharp.src = "https://webapi.amap.com/images/sharp.png";
sharp.style.float = 'left';
sharp.style.position = 'relative';
sharp.style.left = '230px';
sharp.style.height = '23px';
inf.appendChild(sharp);
return inf;
}
})
//聚合样式
var count = markerAll.jyzhan.length;
var _renderClusterMarker = 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)
};
var sts = [{
url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/green.png",
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
size: new AMap.Size(36, 36),
offset: new AMap.Pixel(-18, -18)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/red.png",
size: new AMap.Size(48, 48),
offset: new AMap.Pixel(-24, -24)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
size: new AMap.Size(48, 48),
offset: new AMap.Pixel(-24, -24)
}];
juhe.clusterHjd= new AMap.MarkerClusterer(map, markerAll.jyzhan, {
styles: sts,
gridSize: 80
});
}
}else{
map.remove(markerAll.jyzhan);
juhe.clusterHjd.clearMarkers()
}
}