多边形 Polygon 最后更新时间: 2023年03月27日

亲手试一试

下载完整代码

AMap.Polygon 对象为用户提供在地图图面绘制多边形的能力。

提示

JSAPI 创建多边形提供设置填充颜色、描边颜色、轮廓线样式、填充透明度等属性。

准备

成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

多边形 Polygon

创建步骤如下：

创建地图

// 创建地图
var map = new AMap.Map("container", {
  center: [121.045332, 31.19884], //设置地图初始化中心点位置
  mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
  viewMode: '2D'  //设置地图模式
  zoom: 8.8   //设置当前地图级别
});

设置多边形轮廓线的节点坐标数组

// 多边形轮廓线的节点坐标数组
var path = [
  new AMap.LngLat(116.368904,39.913423),
  new AMap.LngLat(116.382122,39.901176),
  new AMap.LngLat(116.387271,39.912501),
  new AMap.LngLat(116.398258,39.904600)
];

注意

多边形轮廓线的节点坐标数组。支持单个普通多边形，单个带孔多边形，多个带孔多边形数据类型绘制。

创建多边形 Polygon 实例

// 创建多边形 Polygon 实例
var polygon = new AMap.Polygon({
  path: path,  
  fillColor: '#fff', // 多边形填充颜色
  borderWeight: 2, // 线条宽度，默认为 1
  strokeColor: 'red', // 线条颜色
});

多边形 Polygon对象添加到Map

//多边形 Polygon对象添加到 Map
map.add(polygon);
// 缩放地图到合适的视野级别
map.setFitView([ polygon ])

查看属性和方法