获取某个覆盖物

利用 extData 属性给覆盖物添加 id,获取特定的覆盖物。

源代码编辑器

 <!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
 <title>获取某个覆盖物</title>
 <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
 <style>
 html, body, #container {
 height: 100%;
 width: 100%;
 }
 </style>
</head>
<body>
<div id="container"></div>
<div class="input-card">
 <input id="getAllOverlays" type="button" class="btn" value="获取 id 为 2 覆盖物"/>
</div>
<script type="text/javascript"
 src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script type="text/javascript">
 // 创建地图实例
 var map = new AMap.Map("container", {
 zoom: 13,
 center: [116.43, 39.92],
 resizeEnable: true
 });
 var lnglats = [[116.39, 39.92], [116.41, 39.93], [116.43, 39.91], [116.46, 39.93]];
 var markers = [];
 for (var i = 0; i < lnglats.length; i++) {
 var lnglat = lnglats[i];
 // 创建点实例
 var marker = new AMap.Marker({
 position: new AMap.LngLat(lnglat[0], lnglat[1]),
 icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b'+(i+1)+'.png',
 extData:{
 id: i + 1
 }
 });
 markers.push(marker);
 }
 // 将点添加到地图
 map.add(markers);
 // 获取当前 id 的覆盖物
 function getOneOverlay() {
 var targetId = 2;
 var targetMarker;
 for(var i = 0; i < markers.length; i++){
 // 获取存在每个 extData 中的 id
 var id = markers[i].getExtData().id;
 if(id === targetId){
 targetMarker = markers[i];
 break;
 }
 }
 var position = targetMarker.getPosition();
 var infoWindow = new AMap.InfoWindow({
 position: position,
 offset: new AMap.Pixel(0, -35),
 content: '<div>已获取 id 为 2 覆盖物</div>'
 });
 infoWindow.open(map);
 }
 // 绑定获取覆盖物事件
 document.getElementById("getAllOverlays").onclick = getOneOverlay;
</script>
</body>
</html>
 
 

控制台

清空

示例中心常见问题