效果图
图片: 在这里插入图片描述
var = [{x:106.521392,y:29.573258,name:'测试',address:'测试地址'},
{x:106.54852,y:29.534435,name:'测试',address:'测试地址'},
{x:106.54852,y:29.543988,name:'测试',address:'测试地址'},]
datalabel.map((item)=>{
var startIcon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(32, 32),
// 图标的取图地址
image: "../img/house.png",
// 图标所用图片大小
imageSize: new AMap.Size(32, 32),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
});
var markers = [
{
icon: startIcon,
position: [item.x, item.y],
},
];
// 添加一些分布不均的点到地图上,地图上添加三个点标记,作为参照
markers.forEach(function(marker1) {
var marker =new AMap.Marker({
map: map,
icon: marker1.icon,
position: [marker1.position[0], marker1.position[1]],
offset: new AMap.Pixel(0, 0),
label: { content: `
<div class="label-text">
<div class="one">${item.name}</div>
<div class="two">详细地址:${item.address}</div>
</div>
`,
direction: 'right' //文本标注方位 可选值:'top'|'right'|'bottom'|'left'|'center',默认值: 'right'
}
});
// 鼠标移入移出
marker.on('mouseover',()=>{
map.add(markers);
})
marker.on('mouseout',()=>{
map.remove(markers);
})
//添加点击事件
marker.setExtData(marker1.extData)//添加marker 的自定义属性
});
})
海量点标记,鼠标移入标记显示弹窗
var layer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: false
});
// 将图层添加到地图
map.add(layer);
var markers = [];
var icon = {
type: 'image',
image: '../img/house.png',
size: [32, 32],
anchor: 'bottom-center',
};
datalabel.forEach((item) => {
var curData = {
position: [item.x,item.y],
icon
};
var labelMarker = new AMap.LabelMarker(curData);
markers.push(labelMarker);
// 给marker绑定事件
labelMarker.on('mouseover', function (e) {
var datalabel = e.data.data && e.data.data.position;
if(datalabel){
normalMarker.setContent(`
<div class="label-text">
<div class="one">${item.name}</div>
<div class="two">详细地址:${item.address}</div>
</div>
`);
normalMarker.setPosition(datalabel);
map.add(normalMarker);
}
});
labelMarker.on('mouseout', function(){
map.remove(normalMarker);
});
})
// 一次性将海量点添加到图层
layer.add(markers);
// 普通点
var normalMarker = new AMap.Marker({
anchor: 'bottom-center',
offset: [0, -15],
});