Как я могу получить границы многоугольника?

Question

Как я могу получить положения многоугольника на северо-востоке и юго-западе, как в этом примере.Как мы можем сделать это в многоугольнике?

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

Попытка добавить события прослушивания, но они не работают.

Пример

Мой сценарий:

 <script>

    var polygon;
    function initialize() {
        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 6,
            center: {lat: 30.3753, lng: 69.3451},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        // create an array of coordinates for a pentagonal polygon
        var arrCoords = [
            new google.maps.LatLng(32.3753, 64.3451),
            new google.maps.LatLng(30.3753, 66.3451),
            new google.maps.LatLng(30.3753, 65.3451),
            new google.maps.LatLng(29.3753, 63.3451),
            // new google.maps.LatLng(51.477654, -0.002192)
        ];

         polygon = new google.maps.Polygon({
            editable: true,
            paths: arrCoords,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map: map,
            draggable: true,
            geodesic: true,
        });

        polygon.setMap(map);


        polygon.addListener('bounds_changed', showNewRect);


        infoWindow = new google.maps.InfoWindow();
    }

        function showNewRect(event) {

            var ne = polygon.getBounds().getNorthEast();
            var sw = polygon.getBounds().getSouthWest();

            var contentString = '<b>Shape Moved.</b><br>' +
                'New north-east corner: ' + ne.lat() + ', ' + ne.lng() + '<br>' +
                'New south-west corner: ' + sw.lat() + ', ' + sw.lng();

            // Set the info window's content and position.

            console.log('lat_long', contentString);

            var Array = [];

            Array.push(ne.lat(), ne.lng(), sw.lat(), sw.lng());

            $('#lat_long').val(JSON.stringify(Array));

            var value = $('#lat_long').val();
            value = JSON.parse(value);

            infoWindow.setContent(contentString);
            infoWindow.setPosition(ne);

            infoWindow.open(map);
        }
</script>

Answer 1

Для редактируемого и перетаскиваемого полигона вам необходимо зарегистрировать соответствующие события (на полигоне для перетаскивания и на его пути для редактирования событий).

Затем вам нужен объект LatLngBounds и расширить его с помощьюкаждая из ваших координат многоугольника.

var map, polygon;

function initialize() {

  var mapOptions = {
    zoom: 3,
    center: new google.maps.LatLng(40, 9),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  polygon = new google.maps.Polygon({
    editable: true,
    draggable: true,
    strokeOpacity: 0,
    strokeWeight: 0,
    fillColor: '#00FF00',
    fillOpacity: .6,
    paths: [
      new google.maps.LatLng(39, 4),
      new google.maps.LatLng(34, 24),
      new google.maps.LatLng(43, 24),
      new google.maps.LatLng(39, 4)
    ],
    map: map
  });

  // Get Polygon path
  var path = polygon.getPath();

  // Add listeners
  google.maps.event.addListener(path, 'insert_at', getBounds);
  google.maps.event.addListener(path, 'remove_at', getBounds);
  google.maps.event.addListener(path, 'set_at', getBounds);
  google.maps.event.addListener(polygon, 'drag', getBounds);

  // Get the polygon bounds
  getBounds();
}

function getBounds() {

  // Create empty bounds object
  let bounds = new google.maps.LatLngBounds();
  let path = polygon.getPath();

  path.getArray().forEach(function(coord) {

    // Extend bounds with the polygon path coordinates
    bounds.extend(coord);
  });

  // Update display
  document.getElementById('ne-lat').innerHTML = bounds.getNorthEast().lat();
  document.getElementById('ne-lng').innerHTML = bounds.getNorthEast().lng();
  document.getElementById('sw-lat').innerHTML = bounds.getSouthWest().lat();
  document.getElementById('sw-lng').innerHTML = bounds.getSouthWest().lng();
}

initialize();

#map-canvas {
  height: 175px;
  width: 50%;
  display: inline-block;
}

.side {
  display: inline-block;
}

h4 {
  margin: 5px 0;
}

<div id="map-canvas"></div>
<div class="side">
  <h4>
    Polygon bounds
  </h4>
  North East: <span id="ne-lat"></span>, <span id="ne-lng"></span><br> South West: <span id="sw-lat"></span>, <span id="sw-lng"></span>
</div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

Обратите внимание, что если у вас есть многоугольник с несколькими путями, вам нужно использовать getPaths() вместо getPath() и регистрировать свои события на каждомпуть.

JSFiddle link .