高德地图 jsapi 标记多个(marker)点,添加自定义属性,获取自定义属性
var map = new AMap.Map("container", {
zoom: 5,
pitch: 65,
rotation: 45,
center: [116.397428, 39.90923],
viewMode: "3D",
mapStyle: "amap://styles/grey"
});
map.setCity("北京");
var startIcon = new AMap.Icon({
size: new AMap.Size(25, 34),
image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png",
imageSize: new AMap.Size(48, 48),
imageOffset: new AMap.Pixel(-9, -3)
});
var markers = [
{
icon: startIcon,
position: [116.205467, 39.907761],
content:
"" +
'<div class="custom-content-marker">' +
' <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
' <div class="close-btn" οnclick="clearMarker()">X</div>' +
"</div>",
extData:{
id:"阿撒旦法师打发是打发阿斯顿发生"
}
},
{
icon: startIcon,
position: [116.368904, 39.913423],
content:
"" +
'<div class="custom-content-marker">' +
' <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
' <div class="close-btn" οnclick="clearMarker()">X</div>' +
"</div>",
extData:{
id:"阿撒旦法师打发是打发阿斯顿发生"
}
},
{
icon: startIcon,
position: [116.305467, 39.807761],
content:
"" +
'<div class="custom-content-marker">' +
' <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
' <div class="close-btn" οnclick="clearMarker()">X</div>' +
"</div>",
extData:{
id:"阿撒旦法师打发是打发阿斯顿发生"
},
}
];
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(-13, -30),
label: { content: "<div class='infos'>张三</div>",
direction: 'top'
}
});
marker.on('click', showInfoM);
marker.setExtData(marker1.extData)
});
function showInfoM(e){
console.log(e.target.getExtData())
var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置点击了marker!'
console.log(text)
}
var mybounds = new AMap.Bounds(
[114.522638, 36.661981],
[114.473692, 36.622514]
);
map.setBounds(mybounds);
var center = map.getCenter();