共计 3959 个字符，预计需要花费 10 分钟才能阅读完成。
1、一般 maker 创立，而后增加到地图上，页面会呈现卡顿，甚至有可能卡死，页面解体。。。
async initMark() {
var map = this.map
this.removeMarkers()
this.map.setZoom(7)
this.map.setCenter([108.907295, 35.601474])
this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-3, -16) })
let infoWindow = this.infoWindow
let list = this.list
let category = this.mapDataType ? '' : this.category
for (var i = 0; i < list.length; i++) {
let iconType =
list[i] && list[i].index ? list[i].index.split('_data')[0] : ''
let icon = iconType ? this.newIcon(iconType) : this.icon
let lon = list[i].lon || list[i].end_lon
let lat = list[i].lat || list[i].end_lat
// console.log(i, lon, lat)
if (lon && lat) {
let marker = new AMap.Marker({position: [lon, lat],
data: list[i],
map: map,
offset: new AMap.Pixel(-11, -11),
icon: icon
})
let that = this
marker.on('click', function(e) {
let myRow = ''
let showItem = []
let shwoTitlekey = ''
let data =e.target.w.data || e.target.Ce.data
let trueKey = data && data.index ? data.index.split('_data')[0] : ''
if (data.index) {shwoTitlekey = getKeyByCategory(trueKey).nameKey
detailByIndexAndIdApi({index: data.index, id: data.id}).then(
res => {
data = res.data
showItem = formItem[trueKey]
myRow =
'<div class="info_title">' + data[shwoTitlekey] + '</div>'
if (showItem && showItem.length) {for (let i = 0; i < showItem.length; i++) {if (showItem[i].type === 'objArray') {
let val = ''
for (let j = 0; j < showItem[i].name.length; j++) {
val +=
data[showItem[i].name[j].value] +
showItem[i].name[j].label
}
myRow +=
'<div class="info_row"><span class="info_lable">' +
showItem[i].label +
'：</span>' +
val +
'</div>'
} else if (showItem[i].type === 'array') {
let val = ''
for (let j = 0; j < showItem[i].name.length; j++) {if (data[showItem[i].name[j]]) {
val +=
j > 0
? '、' + data[showItem[i].name[j]]
: data[showItem[i].name[j]]
}
}
myRow +=
'<div class="info_row"><span class="info_lable">' +
showItem[i].label +
'：</span>' +
val +
'</div>'
} else {let currentVal = data[showItem[i].name]
? data[showItem[i].name]
: '无'
myRow +=
'<div class="info_row"><span class="info_lable">' +
showItem[i].label +
'：</span>' +
currentVal +
'</div>'
}
}
}
let html = myRow
infoWindow.setContent(html)
infoWindow.open(map, e.target.getPosition())
}
)
}
})
}
// marker.emit('click', { target: marker})
}
}2、通过 new AMap.MassMarks 实现，页面能够很好的渲染，不会呈现卡死。
async initMark() {
var map = this.map
this.resetMap()
this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-3, -16) })
let infoWindow = this.infoWindow
let list = this.list
let category = this.mapDataType ? '' : this.category
let style = []
list.forEach((item, ind) => {
let lon = item.lon || item.end_lon
let lat = item.lat || item.end_lat
item.lnglat = [lon, lat]
let iconType = item && item.index ? item.index.split('_data')[0] : ''
let icon = iconType ? this.newIcon2(iconType) : this.icon
style.push(icon)
item.style = ind
})
var mass = new AMap.MassMarks(list, {
opacity: 1,
zIndex: 111,
cursor: 'pointer',
style: style
})
var marker = new AMap.Marker({content: ' ', map: map})
mass.on('click', function(e) {
let myRow = ''
let showItem = []
let shwoTitlekey = ''
let data = e.data || e.target.w.data || e.target.Ce.data
let trueKey = data && data.index ? data.index.split('_data')[0] : ''
if (data.index) {shwoTitlekey = getKeyByCategory(trueKey).nameKey
detailByIndexAndIdApi({index: data.index, id: data.id}).then(
res => {
data = res.data
showItem = formItem[trueKey]
myRow = '<div class="info_title">' + data[shwoTitlekey] + '</div>'
if (showItem && showItem.length) {for (let i = 0; i < showItem.length; i++) {if (showItem[i].type === 'objArray') {
let val = ''
for (let j = 0; j < showItem[i].name.length; j++) {
val +=
data[showItem[i].name[j].value] +
showItem[i].name[j].label
}
myRow +=
'<div class="info_row"><span class="info_lable">' +
showItem[i].label +
'：</span>' +
val +
'</div>'
} else if (showItem[i].type === 'array') {
let val = ''
for (let j = 0; j < showItem[i].name.length; j++) {if (data[showItem[i].name[j]]) {
val +=
j > 0
? '、' + data[showItem[i].name[j]]
: data[showItem[i].name[j]]
}
}
myRow +=
'<div class="info_row"><span class="info_lable">' +
showItem[i].label +
'：</span>' +
val +
'</div>'
} else {let currentVal = data[showItem[i].name]
? data[showItem[i].name]
: '无'
myRow +=
'<div class="info_row"><span class="info_lable">' +
showItem[i].label +
'：</span>' +
currentVal +
'</div>'
}
}
}
let html = myRow
infoWindow.setContent(html)
infoWindow.open(map, e.data.lnglat)
}
)
}
})
this.mass= mass
mass.setMap(map)
}
3、对于地图重绘
一般 maker 能够通过重绘地图的形式：this.map.clearMap()
海量点重绘能够通过革除海量点重绘：this.mass.clear()
正文完
