本文介绍了在GoogleMaps API中保存绘制的多边形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
大家好,我尝试从google map api保存绘制的多边形,但我不知道如何.我想保存多边形(坐标或路径并以表格形式发送.这就是我所拥有的)直到现在,我都试图阅读文档,但是我不太了解.
Hello guys i try to save a drawn polygon from a google map api , and i don't know how.I want to save the polygon(coordinates, or path and send them in as a form .This is what i have until now, i tried to read the documentation but i can't understand so much.
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 46.435812, lng: 27.639917},
zoom: 17,
mapTypeId: 'hybrid'});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon']
},
});
drawingManager.setMap(map);
};
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBR0YEEOUbWC8qYTig79dMHfOzXR44wX5w&libraries=geometry,drawing&callback=initMap"></script>
推荐答案
对于多边形,请执行与在类似问题中相同的操作:,只需将适当的事件用于多边形( polygoncomplete
)并通过路径进行处理,将所有坐标添加到您合适的表单字段中:
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
var coordStr = "";
for (var i = 0; i < polygon.getPath().getLength(); i++) {
coordStr += polygon.getPath().getAt(i).toUrlValue(6) + ";";
console.log(coordStr);
document.getElementById('coords').value = coordStr;
}
});
代码段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 46.435812,
lng: 27.639917
},
zoom: 17,
mapTypeId: 'hybrid'
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon']
},
});
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
var coordStr = "";
for (var i = 0; i < polygon.getPath().getLength(); i++) {
coordStr += polygon.getPath().getAt(i).toUrlValue(6) + ";";
}
document.getElementById('coords').value = coordStr;
});
drawingManager.setMap(map);
};
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<input id="coords" style="width:600px" />
<div id="map"></div>
这篇关于在GoogleMaps API中保存绘制的多边形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!