先上效果图
首先在index.html引入高德地图,你的key。其中plugin后面拼接是是所依赖的插件。版本不同,有些写发也不同,望注意;这里我使用2.0版本。
<script src="https://webapi.amap.com/maps?v=2.0&key= yourKey &plugin=AMap.MarkerClusterer&plugin=AMap.Autocomplete"></script>
一个盒子,定义宽高。
<div id="container"></div>
地图初始化,mapstyle我使用的是内置的暗黑主题,如有需要,可去高德文档查找别的类型。
由于怕一下全部渲染地图上的所有marker点数据多,这里逻辑是,只渲染视图上地图的marker点。
前后端配合,前端传maxLng, minLng, maxLat, minLat给后端,后端返回应该渲染的数据;
build_map_online() { //初始化地图
let map = new AMap.Map("container", {
resizeEnable: true, //是否监控地图容器尺寸变化
mapStyle: "amap://styles/darkblue",
zoom: 12,//缩放程度
})
map.on("zoomend", (e)=> {//监听地图缩放
this.markers_init(map);
});
map.on("dragend", (e)=> {//监听地图拖曳
this.markers_init(map);
});
this.map = map;
}
注意:其中图片路径我是放在public目录下,建了一个image文件夹放图片;
markers_init(map) {
map.clearMap(); // 清除地图上所有添加的覆盖物
let limitBounds = map.getBounds();
let maxLng = limitBounds.northEast.lng;
let minLng = limitBounds.southWest.lng;
let maxLat = limitBounds.northEast.lat;
let minLat = limitBounds.southWest.lat;
maxMap(maxLng, minLng, maxLat, minLat, this.menuList).then(res=>{
//获取地图视图 极值
if(res.resp_code == 1){
let arr = []
res.datas.forEach(item=>{
let point = new AMap.LngLat(+item.lng,+item.lat);
//iconfont类是配合阿里图标库一起使用,避免多个pic,造成打包过大;
//this.$myfun.get_color()自定义方法,return色号,实现渐变色效果
let markerContent = `
<div class="dx-marker iconfont" style="border-color: ${this.$myfun.get_color(0)};
background-image:linear-gradient(to right,${this.$myfun.get_color(0,.8)},${this.$myfun.get_color(0,.3)});">
${this.$myfun.get_icon(item.device_type)}
</div>
`
let marker = new AMap.Marker({
position:point,
offset: new AMap.Pixel(-13, -30),
content: markerContent,//自定义marker内容
})
map.add(marker);
//接下来是marker的点击事件,点击展示 自定义信息窗口;
marker.on('click',()=>{
infoWindow.open(map, marker.getPosition());
})
map.on("click", ()=> {
infoWindow && infoWindow.close();
});
//这里业务需要,根据状态,点击展示不同的信息框,背景图/高度/内容 有差异,所有提取出来。
//仅供参考
let backPicUrl = '';let backPicHeight= '200px';let closePic = '';let lineHeight = "26px"
backPicUrl = './image/dialog-Blue.png';
closePic = './image/close-Blue.png';
let content = [];let title = ''
content.push(`
<div style="font-size: 14px;color: #fff;height:${backPicHeight};padding:15px;line-height:${lineHeight};
background: url(${backPicUrl});background-size: 100%;position:relative;">
<img src="${closePic}" class="closeLogo" οnclick="closeInfoWindow()"></img>
<div>产品类型:${item.device_type}</div>
<div>产品序号:${item.device_qrcode}</div>
<div ${ item.status!=1 ? 'class="hidden"' : 'class="text-yellow"' } >故障原因:低电压</div>
<div ${ item.status!=2 ? 'class="hidden"' : 'class="text-red"' } >报警原因:测试测试</div>
<div ${ item.status!=2 ? 'class="hidden"' : '' } >负责人:丁贤 12348174501</div>
<div>安装位置:${item.installocation}</div>
<div>详细地址:${item.address}</div>
<div ${ item.status==2 ? 'class="hidden"' : 'class="dx-detail"' } >点击查看详情 </div>
<div ${ item.status!=2 ? 'class="hidden"' : '' }>
<div class="infoWindow-btn">按钮</div>
<div class="infoWindow-btn">按钮</div>
<div class="infoWindow-btn">按钮</div>
<div class="infoWindow-btn">按钮</div>
</div>
</div>
`)
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: this.createInfoWindow(content,closePic),
offset: new AMap.Pixel(12, -30)
})
this.map = map;
})
}
})
},
然后是createInfoWindow函数,创造信息窗口;
createInfoWindow(content,closePicSrc){
let info = document.createElement("div");
info.style.width = "300px";//宽度设置
let middle = document.createElement("div");// 定义中部内容
middle.innerHTML = content;
info.appendChild(middle);
return info
}