vue项目高德地图:循环显示marker点,自定义点图标,点击marker事件
vue项目高德地图:循环显示marker点,自定义点图标,点击marker事件
·
var map = new AMap.Map('videoMap', {
zoom: 17,
pitch: 25,
viewMode: '3D',
resizeEnable: true,
layers: [new AMap.TileLayer.Satellite()], //地图层
})
//设备数据
let ddc = marker1.ddc;
//设备图标
let ddcImgsrc = require('@/assets/gif/12.gif');
//遍历显示marke
ddc.forEach(item=>{
if(!item.lng || !item.lat){return};
let marker = new AMap.Marker({
map:map,
position:[item.lng,item.lat],
content: `<div><img class="imgRotate" src="${ddcImgsrc}" style="width:30px;height:30px;"/></div>`, //设置文本标注内容
offset: new AMap.Pixel(-15, -15), //此处应设为图标尺寸的一半
title:`${item.address}` //鼠标滑过设备显示的文本
});
//给marker对象添加一个属性
marker.setExtData(item);
marker.on('click', _this.markerClick);
//给marker设置一个label
marker.setLabel({
offset:new AMap.Pixel(0,0);
content:`<div class="infoInit">${item.name}</div>`,
direction:'buttom' //显示的位置
})
});
//设置地图层级与中心点 【针对有固定的重心点】
map.setCenter([lng,lat]);
//自动设置中心点 【自动将所有的marker点显示到视觉页面内】
// 第一个参数为空,表明用图上所有覆盖物 setFitview
// 第二个参数为false, 非立即执行
// 第三个参数设置上左下右的空白
map.setFitView(null,false,[100,60,100,60]);
效果图:
更多推荐
已为社区贡献2条内容
所有评论(0)