谷歌地圖繪制工具輸出多邊形坐標

Question

我已經搜索了這個答案，但到目前為止我還沒有給出明確的答案......

問題是：當我嘗試將多邊形坐標寫入console ，如果選擇的工具是多邊形，它就可以工作。 但是，當我使用 Square 或 Circle 時，出現錯誤

e.overlay.getPath is not a function

使用我當前的代碼，我認為else應該抓住正方形和圓形。 顯然我錯了...

這是我所擁有的：

if (e.type == google.maps.drawing.OverlayType.POLYLINE || google.maps.drawing.OverlayType.POLYGON) {
            var locations = e.overlay.getPath().getArray()
            //console.log(bounds.toString());    
            console.log(locations.toString() + " 1st instace");
        }
        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());    
            consol.log(bounds.toString() + " 2nd instance");
        }

以及整個片段：

 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 showArrays(event) { // Since this polygon has only one path, we can call getPath() to return the // MVCArray of LatLngs. var vertices = this.getPath(); var contentString = '<b>Bermuda Triangle polygon</b><br>' + 'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() + '<br>'; // Iterate over the vertices. for (var i = 0; i < vertices.getLength(); i++) { var xy = vertices.getAt(i); contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' + xy.lng(); } } function initialize() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(acheived_lat, acheived_lon), mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, zoomControl: true }); var polyOptions = { strokeWeight: 0, fillOpacity: 0.45, editable: 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 }, 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() { 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()); alert(locations.toString() + " 1st instace"); } 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()); alert(bounds.toString() + " 2nd instance"); } } }); // 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 div { width: auto; } #map { height: 500px; width: 80%; margin-top: 32px; } #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; }

 <div id="map"></div> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=drawing"> </script> <script> window.acheived_lat = 36.825230; window.acheived_lon = -119.702919; </script> <div id="panel"> <div id="color-palette"></div> <div> <button id="delete-button">Delete Selected Shape</button> </div> </div>

我知道這可能與其他有關。 我試過了|| SQUARE || SQUARE在主if也無濟於事。 難倒！

Answer 1

google.maps.Circle對象和google.maps.Rectangle對象沒有 getPath 方法。 您可以計算等效路徑以制作等效多邊形，或者保存它們使用的數據。

• 圓由其center和radius定義（ google.maps.LatLng對象和以米為單位的距離）
• 矩形由其bounds定義（ google.maps.LatLngBounds對象）

此外，這條線沒有做你期望的：

if (e.type == google.maps.drawing.OverlayType.POLYLINE || google.maps.drawing.OverlayType.POLYGON) {

它應該是：

  if ((e.type == google.maps.drawing.OverlayType.POLYLINE) || (e.type == google.maps.drawing.OverlayType.POLYGON)) {

代碼片段：

 var drawingManager; var selectedShape; var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082']; var selectedColor; var colorButtons = {}; function initialize() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(acheived_lat, acheived_lon), mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, zoomControl: true }); var polyOptions = { strokeWeight: 0, fillOpacity: 0.45, editable: 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 }, 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() { setSelection(newShape); }); setSelection(newShape); if ((e.type == google.maps.drawing.OverlayType.POLYLINE) || (e.type == google.maps.drawing.OverlayType.POLYGON)) { var locations = e.overlay.getPath().getArray() console.log("POLY:" + locations.toString()); //alert(locations.toString() + " 1st instace"); } else if (e.type == google.maps.drawing.OverlayType.CIRCLE) { console.log("CIRCLE center=" + e.overlay.getCenter().toUrlValue(6) + " radius=" + e.overlay.getRadius()); } else if (e.type == google.maps.drawing.OverlayType.RECTANGLE) { //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("RECTANGLE:" + bounds.toString()); // alert(bounds.toString() + " 2nd instance"); } } }); // 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(); } 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 showArrays(event) { // Since this polygon has only one path, we can call getPath() to return the // MVCArray of LatLngs. var vertices = this.getPath(); var contentString = '<b>Bermuda Triangle polygon</b><br>' + 'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() + '<br>'; // Iterate over the vertices. for (var i = 0; i < vertices.getLength(); i++) { var xy = vertices.getAt(i); contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' + xy.lng(); } } google.maps.event.addDomListener(window, 'load', initialize);

 #map div { width: auto; } #map { height: 500px; width: 80%; margin-top: 32px; } #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; }

 <div id="map"></div> <script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"> </script> <script> window.acheived_lat = 36.825230; window.acheived_lon = -119.702919; </script> <div id="panel"> <div id="color-palette"></div> <div> <button id="delete-button">Delete Selected Shape</button> </div> </div>