карта вычислений наложение оверлей завершено

Question

Я пытаюсь использовать обратный вызов overlaycomplete, чтобы получить вычисления площади форм по мере их отрисовки, однако кажется невозможным получить какую-либо информацию о пути из обратного вызова overlaycomplete?Я пытался использовать getPaths (), и он просто продолжает говорить, что getPaths не является функцией ... Пытался найти способ получить или построить MVCArray нарисованной формы, также не работает ... Я использую библиотеку Drawing Controlsу которого включены параметры «Круг», «Прямоугольник» и «Полигон» ... или есть другой метод, который я могу использовать, который позволил бы мне получить площадь всех фигур, нарисованных на карте?

<div id="map"></div>
<script>
var map;
var allCircles=new Array();
var allRectangles=new Array();

var allPolygons=new Array();

function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 13    
    });

    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ['circle','polygon','rectangle']
        },
        circleOptions: {
            fillColor: '#888888',
            fillOpacity: 0.7,
            strokeWeight: 2,
            clickable: false,
            editable: true,
            zIndex: 1
        },
        rectangleOptions: {
            fillColor: '#888888',
            fillOpacity: 0.7,
            strokeWeight: 2,
            clickable: false,
            editable: true,
            zIndex: 1
        },
        polygonOptions: {
            fillColor: '#888888',
            fillOpacity: 0.7,
            strokeWeight: 2,
            clickable: false,
            editable: true,
            zIndex: 1
        }
    });

    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(thisShape) {
        if (thisShape.type == 'circle') {
            allCircles.push(thisShape.getPaths());
        }else if(thisShape.type == 'rectangle'){
            allRectangles.push(thisShape.getPaths());
        }else if(thisShape.type == 'polygon'){
            allPolygons.push(thisShape.getPaths());
        }
    });

}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]&libraries=drawing,geometry&callback=initMap" async defer></script>

Answer 1

Это возможно.getPaths() доступно, если тип фигуры polygon.Причина, по которой вы получаете ошибку, заключается в том, что thisShape ( из вашего примера кода ) возвращают 2 объекта, таких как type и overlay.Чтобы правильно использовать getPaths(), вы должны сначала наложить наложение, так как пути могут быть найдены внутри этого объекта.код должен выглядеть примерно так:

thisShape.overlay.getPaths();

Однако для таких фигур, как круг и прямоугольник, getPath() не будет работать, поскольку вы не наносили точки на фигуру.Это указано в самой документации Circles

В отличие от Polygon, вы не определяете пути для Circle.Вместо этого у круга есть два дополнительных свойства, которые определяют его форму

• center определяет google.maps.LatLng центра круга.
• radius указывает радиускруга, в метрах.

и в документации Прямоугольники

В отличие от многоугольника, вы не определяете пути дляПрямоугольник.Вместо этого у прямоугольника есть свойство bounds, которое определяет его форму путем указания google.maps.LatLngBounds для прямоугольника.

Чтобы получить доступ к этой информации из возврата после overlaycomplete обратного вызова, используя вашкоды в качестве примера, вот как:

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(thisShape) {

Для кругов вы можете использовать только getCenter() и getRadius().

  if (thisShape.type == 'circle') {
    console.log("center: " + thisShape.overlay.getCenter());
    console.log("radius: " + thisShape.overlay.getRadius());

и для прямоугольника getBounds().( В любом случае, если вы не знаете, как извлечь данные из этого, вы можете использовать getNorthEast() и getSouthWest(). )

  }else if(thisShape.type == 'rectangle'){
    bounds = thisShape.overlay.getBounds();
    console.log("north east: " + bounds.getNorthEast());
    console.log("south west: " + bounds.getSouthWest());

Теперь для последней части, чтобы получить доступ к latLngs после завершения формы, просто используйте getPaths().Затем, чтобы получить точки внутри этого объекта, я просто нацелился на массив, в котором можно найти массив latLngs:

  }else if(thisShape.type == 'polygon'){
    console.log("lat lngs: " + thisShape.overlay.getPaths());
    console.log(thisShape.overlay.getPaths().b[0].b);
  }
});

Хотя эта информация не дает точной области формы, она даетдостаточно информации, чтобы воссоздать их в том же месте на карте.

Вы можете проверить этот рабочий образец .Просто попробуйте добавить фигуры и увидеть результаты в консоли.

Надеюсь, это помогло !!