如何将我存储的多边形从数据库绘制到 google 地图上

Question

对于 angular google 地图，我希望能够将存储的多边形标记数组绘制到地图上。

我使用的技术是：Angular 版本 1 JavaScript，使用 angular 指令和 templateUrl。

这是我的 html 指令模板：

<ui-gmap-google-map center="config.map.center" zoom="config.map.zoom" options="config.map.options" events="config.map.events" draggable="true">

        <ui-gmap-polygon path="compatiblePolygon" stroke="polygonConfig.stroke" fill="polygonConfig.fill" fit="true" static="true" visible="polygonConfig.visible" editable="polygonConfig.editable" draggable="polygonConfig.draggable" clickable="true" events="polygonConfig.events">
        </ui-gmap-polygon>

        <ui-gmap-markers models="compatiblePoints" coords="'self'" idKey="'id'"
            options="pointsConfig.options"
            clickable="true">
        </ui-gmap-markers>

        <ui-gmap-drawing-manager options="config.drawing.options" static="true" control="drawingManagerControl" events="config.drawing.events"></ui-gmap-drawing-manager>

    </ui-gmap-google-map>

Answer 1

您需要将多边形作为编码字符串而不是多边形坐标存储在数据库中。 您可以获得编码的多边形如下：

/* This function save latitude and longitude to the polygons[] variable after we call it. */
    function encodePolygon(polygon)
    {
        //This variable gets all bounds of polygon.
        var path = polygon.getPath();

        var encodeString = 
        google.maps.geometry.encoding.encodePath(path);

        /* store encodeString in database */
    }

然后您可以随时使用编码字符串重新绘制多边形：

function DrawPolygon(encodedString){
    var decodedPolygon =   
   google.maps.geometry.encoding.decodePath(encodedString);

            var polygon = new google.maps.Polygon({
                paths: decodedPolygon,
                editable: false,
                strokeColor: '#FFFF',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FFFF',
                fillOpacity: 0.35
            });
}