多边形绘图和使用Google Map API v3获得坐标
Bur*_*dem 29 google-maps polygon
我正在尝试使用Google Maps API v3开发应用程序.我想做的是; 首先让用户在Google Map上绘制一个多边形并获取他/她的多边形坐标并将它们保存到数据库中.然后我将显示用户保存的坐标.
我不知道如何让用户使用API v3在Google Map上绘制多边形,然后获取坐标.如果我可以获得这些坐标,则很容易将它们保存到数据库中.
http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html几乎就是一个确切的例子,但它使用的是API v2并且不提供坐标.我想使用API v3并能够获得所有坐标.
是否有任何绘制多边形并使用API v3获取其坐标的示例？
jha*_*wes 13
如果您需要的是这里的坐标是我想要使用的绘图工具 - 移动多边形或重新塑造它,坐标将显示在地图正下方:jsFiddle here.
此外,这是一个Codepen
JS
var bermudaTriangle;
function initialize() {
var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
var mapOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.RoadMap
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var triangleCoords = [
new google.maps.LatLng(33.5362475, -111.9267386),
new google.maps.LatLng(33.5104882, -111.9627875),
new google.maps.LatLng(33.5004686, -111.9027061)
];
// Construct the polygon
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
draggable: true,
editable: true,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
google.maps.event.addListener(bermudaTriangle, "dragend", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "insert_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "remove_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "set_at", getPolygonCoords);
}
function getPolygonCoords() {
var len = bermudaTriangle.getPath().getLength();
var htmlStr = "";
for (var i = 0; i < len; i++) {
htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(5) + "<br>";
}
document.getElementById('info').innerHTML = htmlStr;
}
HTML
<body onload="initialize()">
<h3>Drag or re-shape for coordinates to display below</h3>
<div id="map-canvas">
</div>
<div id="info">
</div>
</body>
CSS
#map-canvas {
width: auto;
height: 350px;
}
#info {
position: absolute;
font-family: arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
ylo*_*los 11
使用谷歌提供的getter而不是像某些人那样访问属性更干净/更安全
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
var coordinatesArray = polygon.overlay.getPath().getArray();
});
好吧,不幸的是,如果一个人匿名/没有登录,似乎无法直接从maps.google.com放置自定义标记和绘制(并获取坐标)(如果我记得正确的话,几年前就有可能).尽管如此,由于这里的答案,我设法组合了包含Google Places搜索的示例,并允许通过绘图库绘图,并在选择任何类型的形状(包括多边形的坐标)时转储坐标可以复制; 代码在这里:
这是它的样子:
(位置标记是单独处理的,可以通过搜索输入表单元素的DEL"按钮"删除;"curpos"显示地图视口的当前中心[位置]和缩放级别).