使用绘图管理器在谷歌地图上绘制时获取矩形/多边形的坐标

Question

我找到了一个启用绘图工具的要点，并提供了从几种颜色中进行选择以在谷歌地图上绘图的能力： https : //gist.github.com/Hagith/5765919

我正在尝试将其与 socket.io 结合使用，以便多人可以查看地图，并且当一个人在地图上绘制某些内容时，所有人都可以看到所绘制的内容。

我已经有了标记的基本想法

socket.emit("marker", e.overlay.position);

然而，当标记放置在矩形、多边形和圆形上时，似乎有点难。 当我用这些形状中的任何一个注销地图上的点击事件时，它返回的数据似乎比它用标记返回的数据复杂得多，而且我找不到我需要的点的坐标向其他用户广播。 有谁知道在上述要点的上下文中在哪里可以找到这些？

编辑：我已经能够用e.overlay.j.center找到中心

Answer 1

不建议使用这些类型的属性 ( e.overlay.j )，因为它们不是用于公共访问的，并且不能保证它们不会在下一个版本的Google Maps JavaScript API 中更改。

对于google.maps.drawing.OverlayType.RECTANGLE和google.maps.drawing.OverlayType.CIRCLE类型，您可以利用getBounds() function来确定当前形状的纬度/经度边界，如下所示：

//get lat/lng bounds of the current shape
var bounds = e.overlay.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
var center = bounds.getCenter();

对于google.maps.drawing.OverlayType.POLYLINE和google.maps.drawing.OverlayType.POLYGON类型，您可以使用getPath() function ：

//get lat/lng array of the current shape
var locations = e.overlay.getPath().getArray()

修改示例

 var drawingManager; var selectedShape; var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082']; var selectedColor; var colorButtons = {}; function clearSelection() { if (selectedShape) { selectedShape.setEditable(false); selectedShape = null; } } function setSelection(shape) { clearSelection(); selectedShape = shape; shape.setEditable(true); selectColor(shape.get('fillColor') || shape.get('strokeColor')); } function deleteSelectedShape() { if (selectedShape) { selectedShape.setMap(null); } } function selectColor(color) { selectedColor = color; for (var i = 0; i < colors.length; ++i) { var currColor = colors[i]; colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff'; } // Retrieves the current options from the drawing manager and replaces the // stroke or fill color as appropriate. var polylineOptions = drawingManager.get('polylineOptions'); polylineOptions.strokeColor = color; drawingManager.set('polylineOptions', polylineOptions); var rectangleOptions = drawingManager.get('rectangleOptions'); rectangleOptions.fillColor = color; drawingManager.set('rectangleOptions', rectangleOptions); var circleOptions = drawingManager.get('circleOptions'); circleOptions.fillColor = color; drawingManager.set('circleOptions', circleOptions); var polygonOptions = drawingManager.get('polygonOptions'); polygonOptions.fillColor = color; drawingManager.set('polygonOptions', polygonOptions); } function setSelectedShapeColor(color) { if (selectedShape) { if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) { selectedShape.set('strokeColor', color); } else { selectedShape.set('fillColor', color); } } } function makeColorButton(color) { var button = document.createElement('span'); button.className = 'color-button'; button.style.backgroundColor = color; google.maps.event.addDomListener(button, 'click', function () { selectColor(color); setSelectedShapeColor(color); }); return button; } function buildColorPalette() { var colorPalette = document.getElementById('color-palette'); for (var i = 0; i < colors.length; ++i) { var currColor = colors[i]; var colorButton = makeColorButton(currColor); colorPalette.appendChild(colorButton); colorButtons[currColor] = colorButton; } selectColor(colors[0]); } function initialize() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 16, center: new google.maps.LatLng(52.25097, 20.97114), mapTypeId: google.maps.MapTypeId.SATELLITE, disableDefaultUI: true, zoomControl: true }); var polyOptions = { strokeWeight: 0, fillOpacity: 0.45, editable: true, draggable: true }; // Creates a drawing manager attached to the map that allows the user to draw // markers, lines, and shapes. drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYGON, markerOptions: { draggable: true }, polylineOptions: { editable: true, draggable: true }, rectangleOptions: polyOptions, circleOptions: polyOptions, polygonOptions: polyOptions, map: map }); google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) { if (e.type !== google.maps.drawing.OverlayType.MARKER) { // Switch back to non-drawing mode after drawing a shape. drawingManager.setDrawingMode(null); // Add an event listener that selects the newly-drawn shape when the user // mouses down on it. var newShape = e.overlay; newShape.type = e.type; google.maps.event.addListener(newShape, 'click', function (e) { if (e.vertex !== undefined) { if (newShape.type === google.maps.drawing.OverlayType.POLYGON) { var path = newShape.getPaths().getAt(e.path); path.removeAt(e.vertex); if (path.length < 3) { newShape.setMap(null); } } if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) { var path = newShape.getPath(); path.removeAt(e.vertex); if (path.length < 2) { newShape.setMap(null); } } } setSelection(newShape); }); setSelection(newShape); if (e.type == google.maps.drawing.OverlayType.POLYLINE || google.maps.drawing.OverlayType.POLYGON) { var locations = e.overlay.getPath().getArray() //console.log(bounds.toString()); document.getElementById('output').innerHTML = locations.toString(); } else { //get lat/lng bounds of the current shape var bounds = e.overlay.getBounds(); var start = bounds.getNorthEast(); var end = bounds.getSouthWest(); var center = bounds.getCenter(); //console.log(bounds.toString()); document.getElementById('output').innerHTML = bounds.toString(); } } }); // Clear the current selection when the drawing mode is changed, or when the // map is clicked. google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection); google.maps.event.addListener(map, 'click', clearSelection); google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape); buildColorPalette(); } google.maps.event.addDomListener(window, 'load', initialize);

 #map, html, body { padding: 0; margin: 0; width: 960px; height: 300px; } #panel { width: 200px; font-family: Arial, sans-serif; font-size: 13px; float: right; margin: 10px; } #color-palette { clear: both; } .color-button { width: 14px; height: 14px; font-size: 0; margin: 2px; float: left; cursor: pointer; } #delete-button { margin-top: 5px; }

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script> <div id="panel"> <div id="color-palette"></div> <div> <button id="delete-button">Delete Selected Shape</button> </div> </div> <div id="map"></div> <div id="output"></div>

Answer 2

编辑：我已经能够用 e.overlay.j.center 找到中心

您需要非常小心地使用可以在浏览器调试工具中看到的单字母属性。 它们没有记录在案或静态，并且会在没有警告的情况下更改。

---

要回答实际问题 - e.overlay的类型取决于您初始化 DrawingManager 的内容，请参阅此处的文档。 因此，如果您正在绘制多边形，则e.overlay将是Polygon类型。 然后，您可以使用e.overlay.getPath(0).getArray()获取组成该 Polygon 的点，它为您提供LatLng对象数组。 （显然循环所有可用的路径，而不仅仅是0 ）。

这里有一个很好的例子，它显示了基于覆盖返回的几何类型的切换行为。

Answer 3

getCoords(someShape){
    const paths = someShape.getPath().getArray();
    const coords = paths.map((a) => [a.lat(), a.lng()]);
}

给出 [lat, lng] 的列表