对于 Angular 谷歌地图,我希望能够将存储的标记多边形数组绘制到 map 上。
我使用的技术是:带有 JavaScript 的 Angular 版本 1,使用 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>
最佳答案
您需要将多边形存储为数据库中的编码字符串,而不是多边形坐标。 您可以按如下方式获取编码多边形:
/* 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
});
}
关于javascript - 如何将数据库中存储的多边形绘制到谷歌地图上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36407032/