AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/08/03 16:16
多边形 Polygon

Polygon 表示地图上的多边形覆盖物,它包含一组点。多边形将这组点按顺序首尾相连,最终围成一个封闭图形。

添加多边形

通过 map.addOverlay 将多边形添加到地图中

var path = [
new BMap.Point(116.387112,39.920977),
new BMap.Point(116.385243,39.913063),
new BMap.Point(116.394226,39.917988),
new BMap.Point(116.401772,39.921364),
new BMap.Point(116.41248,39.927893)
];
var polygon = new BMap.Polygon(path, {
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 0.5
});
map.addOverlay(polygon);

常用配置项

创建 Polygon 时,可以通过第二个参数设置多边形的属性,常用属性如下:

  • strokeColor:设置多边形描边颜色,如 "blue""#ff0000" 等。

  • strokeWeight:设置多边形描边宽度,数值类型,默认值为 2。

  • strokeOpacity:设置多边形描边透明度,取值范围 0.0 ~ 1.0

  • strokeStyle:设置多边形描边样式,可选 "solid"(实线)或 "dashed"(虚线)。

  • fillColor:设置多边形填充颜色,如 "#b9ddfa"

  • fillOpacity:设置多边形填充透明度,取值范围 0.0 ~ 1.0

  • enableEditing:是否启用多边形编辑功能,默认 false。编辑效果见 编辑多边形示例

var polygon = new BMap.Polygon(path, {
strokeColor: "blue",
strokeWeight: 4,
strokeOpacity: 0.8,
strokeStyle: "solid",
fillColor: "#b9ddfa",
fillOpacity: 0.5,
enableEditing: false
});

常用方法

多边形添加到地图后,可以通过实例方法动态更新属性,常用方法如下:

// 修改多边形路径
var newPath = [
new BMap.Point(116.387, 39.921),
new BMap.Point(116.385, 39.913),
new BMap.Point(116.394, 39.918)
];
polygon.setPath(newPath);
// 修改多边形样式
polygon.setStrokeColor("red");
polygon.setStrokeWeight(6);
polygon.setStrokeOpacity(0.5);
polygon.setStrokeStyle("dashed");
polygon.setFillColor("#ff0000");
polygon.setFillOpacity(0.3);
// 获取多边形路径
var path = polygon.getPath();

绘制带孔的多边形

你可以在设置 Polygon 的path的时候传入一个二维数组,二维数组中第一个数组是外环,后续数组是孔。

// 带孔的数据
var holePath = [
[
new BMap.Point(116.35965, 39.92855),
new BMap.Point(116.35391, 39.9374),
new BMap.Point(116.34873, 39.92855),
new BMap.Point(116.34696, 39.91527),
new BMap.Point(116.38335, 39.9093),
new BMap.Point(116.38121, 39.93461),
],
[
new BMap.Point(116.35, 39.925),
new BMap.Point(116.36, 39.925),
new BMap.Point(116.36, 39.92),
new BMap.Point(116.35, 39.92),
],
[
new BMap.Point(116.365, 39.925),
new BMap.Point(116.37, 39.925),
new BMap.Point(116.37, 39.92),
new BMap.Point(116.365, 39.92),
new BMap.Point(116.365, 39.925),
],
];
// 绘制镂空面
var polygonWithHole = new BMap.Polygon(holePath, {
zIndex: 5,
fillOpacity: 1,
fillColor: "#b9ddfa",
strokeColor: "#359ff6",
strokeWeight: 2,
strokeOpacity: 1,
});


相关类参考

BMap.Polygon
BMap.Point

上一篇

贝塞尔曲线

下一篇

本篇文章对您是否有帮助?