调用AMap.Polygon显示区域名称,label
时间: 2024-10-18 10:20:37 浏览: 40
在高德地图JavaScript API中,如果你想在地图上显示区域的名称并标注,可以使用`AMap.Marker`和`AMap.Label`配合Polygon。首先,你需要创建一个`AMap.Polygon`表示你要标记的区域,并获取每个点的信息。然后,在Polygon的每个顶点处添加一个`AMap.Marker`来标记位置,同时关联一个`AMap.Label`来显示区域名称。
以下是大致步骤:
1. 初始化地图和Polygon:
```javascript
var map = new AMap.Map('container', {
zoom: 13,
center: [116.404, 39.915]
});
// 创建Polygon数据
var polygonData = [
// ...填充多边形顶点的坐标数组
];
var polygon = new AMap.Polygon({
paths: polygonData,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity: 0.5,
clickable: true
});
map.add(polygon);
```
2. 添加Marker和Label:
```javascript
polygon.eachVertex(function(vertex) {
var marker = new AMap.Marker({
position: vertex.get('lnglat'),
draggable: false
});
map.add(marker);
var label = new AMap.Label({
content: vertex.get('name'), // 这里假设每个顶点都有一个'name'属性存储区域名称
offset: new AMap.Pixel(0, -20),
position: marker.getPosition(),
align: 'right'
});
marker.set('label', label);
});
```
这样,当你点击Polygon时,对应的Marker就会显示出来,并在其旁边显示区域名称。
阅读全文