多边形 Polygon 最后更新时间: 2023年12月04日
如果想要在地图上绘制多边形覆盖物，可以使用AMap.Polygon，多边形是由多个点组成的可填充的形状，可以是任何形状，例如矩形、三角形等，用于标记特定区域。
多边形绘制示例
提示
多边形AMap.Polygon提供设置填充颜色、描边颜色、轮廓线样式、填充透明度等属性。
1、绘制多边形
1
1.1 准备
成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
提示
你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。
2
1.2 创建地图
//创建地图
var map = new AMap.Map("container", {
center: [121.045332, 31.19884], //地图中心点
mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
viewMode: "2D", //设置地图模式
zoom: 8.8, //地图级别
});3
1.3 设置多边形轮廓线的节点坐标数组
//多边形轮廓线的节点坐标数组
var path = [
new AMap.LngLat(116.368904, 39.913423),
new AMap.LngLat(116.387271, 39.912501),
new AMap.LngLat(116.398258, 39.9046),
];注意
多边形支持普通多边形，带单个孔多边形，带多个孔多边形类型绘制。
对应各种类型多边行的轮廓坐标数组示意：（假设 lnglat = new AMap.LngLat(lng, lat) 或 lnglat = [lng, lat]）
普通多边形：path = [lnglat, lnglat ...] 或 path = [[lnglat, lnglat ...]]
带单个孔多边形：path = [[lnglat, lnglat ...], [ lnglat, lnglat ...]]
带多个孔多边形：path = [[lnglat, lnglat ...], [lnglat, lnglat ... ], [lnglat, lnglat ...] ...] 4
1.4 创建多边形 Polygon 实例
//创建多边形 Polygon 实例
var polygon = new AMap.Polygon({
path: path, //路径
fillColor: "#fff", //多边形填充颜色
strokeWeight: 2, //线条宽度，默认为 2
strokeColor: "red", //线条颜色
});5
1.5 多边形 Polygon 对象添加到 Map
//多边形 Polygon对象添加到 Map
map.add(polygon);
//将覆盖物调整到合适视野
map.setFitView([ polygon ])提示
使用map.add()方法将多边形实例添加到地图中，map.setFitView()方法会根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别。
6
1.6 给 Polygon 添加事件
polygon.on("mouseover", () => {
//鼠标移入事件
polygon.setOptions({
//修改多边形属性的方法
fillOpacity: 0.7, //多边形填充透明度
fillColor: "#7bccc4",
});
});
polygon.on("mouseout", () => {
//鼠标移出事件
polygon.setOptions({
fillOpacity: 1,
fillColor: "#fff",
});
});