创建一个盒子 给上宽高
初始化地图
this.map = new AMap.Map('map', {
zoom: 16, //设置地图显示的缩放级别
center: [114.366248, 30.53886],//设置地图中心点坐标
// mapStyle: 'amap://styles/', //设置地图的显示样式
viewMode: '2D', //设置地图模式
});
注销地图
beforeDestory() {
this.map.destory()
},
var marker = new AMap.Marker({
position: arr,
icon: new AMap.Icon({
image: img,
}),
offset,
})
this.markArr.push(marker)
// 弹框
var infoWindow = new AMap.InfoWindow({
content: this.createInfoWindow(content, name, inMid, tips, bottomName),
anchor: 'bottom-center',
isCustom: true,
closeWhenClickMap: true,
offset: infoOffset
});
// 点击事件
marker.on('click', () => {
infoWindow.open(map, arr);
})
map.add(marker);
高德地图跟百度地图一样 自定义弹框就是往弹框盒子里自己添加 div 然后写样式
createInfoWindow(content, name, inMid, tips, bottomName) {
var info = document.createElement("div");
var middle = document.createElement("div");
var inMiddle = document.createElement("div")
var spans = document.createElement("div")
var divtop = document.createElement("div")
var divnbottom = document.createElement("div")
divtop.className = 'fff'
divnbottom.className = bottomName
divtop.innerHTML = content
divnbottom.innerHTML = tips
spans.appendChild(divtop);
spans.appendChild(divnbottom);
middle.className = name;
inMiddle.className = inMid;
middle.appendChild(inMiddle);
middle.appendChild(spans);
info.appendChild(middle);
return info;
},
如果弹框内添加点击事件 只能去写定时器判断这个 dom 是否存在 存在用 js 动态添加 不能在动态添加 HTML 的时候在标签里写上 onClick 或者 @click 事件 这样是没有用的 动态添加 element 组件也是没用的
this.setint = setInterval(() => {
if (document.getElementById("lastImg")) {
let con = document.getElementById("lastImg")
con.onclick = () => {
let list = []
this.showInDialogImgList = []
this.showInDialogWhereList = []
let devChnId = con.getAttribute('devChnId')
this.positionList.forEach(item => {
if (item[0].devChnId == devChnId) {
list = item
}
})
list.forEach(item => {
console.log(item);
if (item.imgUrlS3 && item.imgUrlS3.length) {
this.showInDialogImgList.push(item.imgUrlS3)
} else {
this.showInDialogImgList.push(item.imgUrlDahua)
}
this.showInDialogWhereList.push({
time: item.capDate,
name: item.admDevEncoderChnEntity.channelName
})
})
console.log(this.showInDialogWhereList);
this.innerVisible = true
};
}
}, 1000);
记得清除
destory() {
clearInterval(this.setint)
}
let polyline = new AMap.Polyline({
map: this.inmap, //初始化的地图变量
path: this.markerList, //折线的存放数组,很重中。一般是好多经纬度组成的数组。
outlineColor: '#0484E6',
strokeColor: "#0484E6",
strokeOpacity: 0.6,
strokeWeight: 10,
borderWeight: 1,
strokeStyle: "solid",
strokeDasharray: [0, 0, 0],
lineJoin: 'round',
lineCap: 'round',
zIndex: 20,
strokeStyle: "dashed",
strokeDasharray: [40, 10]
});
polyline.setMap(this.inmap)
markerList 是一个 点位 数组
this.markerList.push(new AMap.LngLat(lng, lat))
找到你想清除的点位 将点位添加到数组中 类似于上方的 markerList
this.map.remove(this.markArr)
this.inmap.clearMap()