如何在Angular NgMap中将<shape>解析为Google Maps Polygon对象？

安全阿岳

2026-8-4

问题解答

核心错误原因

你不能直接将HTML中的<shape> DOM元素传入google.maps.Polygon构造函数——这个构造函数接受的是配置选项对象（比如包含paths、strokeColor等属性的对象），而非DOM节点。直接传入DOM会导致创建的Polygon实例无效，调用getPath()自然会报错。

另外，页面中的<shape>是Angular Google Maps指令的自定义标签，它的作用是在底层自动创建Google Maps的Polygon实例，DOM本身并不是Polygon对象，无法直接转换。

正确实现方式

通过指令提供的创建完成事件获取已初始化的Polygon实例，而非手动从DOM中提取：

修改HTML代码

<shape name="polygon" id="polygon" stroke-color="#FF0000"
       stroke-opacity="1.0"
       stroke-weight="2"
       draggable="true"
       geodesic="false"
       editable="true"
       on-create="polygonCreated(polygonInstance)"
       paths="mappedGeoCoordinates" >
</shape>

移除insert-at="{{insertAt()}}"，改用指令的on-create事件（不同Angular Maps指令的事件名可能略有差异，需对应你使用的库）
paths直接绑定$scope.mappedGeoCoordinates，无需插值表达式{{}}，确保Angular能监听变量变化并同步更新Polygon路径

修改控制器代码

// 存储已创建的Polygon实例
$scope.polygonInstance = null;

// 接收指令创建完成后的Polygon实例
$scope.polygonCreated = function(instance) {
    $scope.polygonInstance = instance;
};

$scope.insertAt = function(event) {
    if ($scope.polygonInstance) {
        // 成功获取路径数组
        const pathArray = $scope.polygonInstance.getPath().getArray();
        console.log("路径数组：", pathArray);
    } else {
        console.error("Polygon实例尚未初始化完成");
    }
};