这个试用于高德地图,
首先要调用方法 'AMap.MarkerCluster',
if (clusters) {
clusters.setMap(null)
}
clusters = new VueAmap.MarkerCluster(this.map, this.points, {
gridSize: 30, // 自定义聚合点样式
styles: styles,
renderMarker: this.renderMarker, //非聚合点的样式,可以自己定义
});
let styles = [{
url: 'https://a.amap.com/jsapi_demos/static/images/blue.png',
size: new VueAmap.Size(32, 32),
offset: new VueAmap.Pixel(-16, -16)
}]
renderMarker(context) { //给非聚合点添加点击,等方法,
this.getTime()
this.onAndOff(context.data[0].item.reportTime, this.newTime, this.$vue_config.inspectionMinNum)
console.log('context', context.data[0]); //这个看个人要求,传的数据可以不传
context.marker.setContent(`<img src="${this.img}" width="40px" height="40px" alt="">`);
//此处为设置标记在地图上的偏移,根据标记物大小处理
context.marker.setOffset(new VueAmap.Pixel(-20, -30));
//此处为设置标记是否显示在最上方,一般只有选中的标记在最上方
context.marker.setTop(top);
//此处为设置标记携带的数据,点击事件会使用
context.marker.setExtData({
id: context.data[0].item
});
//此处为添加单个标记点击事件
context.marker.on('dblclick', ev => {
//当前标记居中
this.currentPerson = context.data[0].item
console.log("巡检员", this.amam)
this.$refs.personInfo.showDialog(this.currentPerson)
this.currentPerson = {}
});
context.marker.on("rightclick", (res) => {
this.currentPerson = context.data[0].item
vueContextMenu.open(this.map, res.lnglat);
this.contextMenuPositon = res.lnglat;
let center = [res.lnglat.lng, res.lnglat.lat]
this.centerArr = center
setTimeout(() => {
this.currentPerson = {}
}, 4000)
});
let infoWindow = new VueAmap.InfoWindow({
content: context.data[0].item.userName + ':最后上报点位时间' + context.data[0].item.reportTime,
offset: new VueAmap.Pixel(0, -38),
});
context.marker.on("mouseover", (e) => {
// 此时 给此点位信息窗体,显示任务名称
if (context.data[0].lnglat.lng && context.data[0].lnglat.lat) {
infoWindow.open(this.map, [context.data[0].lnglat.lng, context.data[0].lnglat.lat])
}
// console.log("point1", point, item)
})
context.marker.on("mouseout", (e) => {
infoWindow.close()
})
context.marker.setLabel({
direction: 'top',
offset: new VueAmap.Pixel(0, 0), //设置文本标注偏移量
content: "<div class='info' style='border:0;'>" + context.data[0].item.userName.substr(0, 1) + "</div>",
//设置文本标注内容
});
},