Карты Google расширяют ограничение границы прямоугольника

Question

Пожалуйста, найдите документацию google mapsApi https://developers.google.com/maps/documentation/javascript/shapes#editable Пожалуйста, уменьшите масштаб до мировоззрения, а затем увеличьте выбор региона вправо за одну попытку.В какой-то момент вы могли заметить, что выбор стал нестабильным, и он выбирает совершенно другой участок мира.

По умолчанию инструмент выбора прямоугольника, кажется, ищет кратчайший путь для завершения формы.Это создает странное поведение при попытке нарисовать очень очень большую область.

1. Я хотел щелкнуть и перетащить очень большую область, покрывающую большую географию.Я тащил Запад на Восток.Как только размер объекта стал очень большим, выбор зарезервировался и охватил совершенно другой участок мира.

2. Я пытаюсь расширить границу, чтобы охватить весь мир.Когда граница проходит достаточно далеко, область снова становится минимальной / меньшей областью.

Ожидаемое поведение: селектор продолжал расширяться в том направлении, которое намеревался пользователь.В этом случае я ожидал бы, что селектор продолжит расширение с запада на восток.

https://developers.google.com/maps/documentation/javascript/shapes#editable

var bounds = {north: 44.599, south: 44.490, east: -78.443, west: -78.649 }; // Define a rectangle and set its editable property to true. var rectangle = new google.maps.Rectangle({bounds: bounds, editable: true});

Пожалуйста, попытайтесь расширить прямоугольник в направлении вправо

Есть ли решение для разрешения упомянутого сценария?

Пожалуйста, дайте мне знать, если потребуется дополнительная информация.

Answer 1

Как я уже сказал в своем комментарии, когда вы перетаскиваете его «слишком далеко», прямоугольные координаты влево и вправо (долгота) инвертируются.

Другими словами, если вы перетаскиваете его слишком далеко вправо, право станет левым, а левое - туда, куда вы перетащили правую сторону.И наоборот в другом направлении.Таким образом, сравнивая, где было слева, где равно справа или наоборот, вы можете обнаружить, что ваш прямоугольник влево и вправо перевернут, и инвертировать его снова ... Таким образом, выможет достичь того, что вы хотите.

И, конечно, если вы перетащите правую сторону дальше вправо, чем было слева (или наоборот), он будет сброшен, так как у вас не может быть прямоугольникаперекрывая себя по всему земному шару.

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

var map;

function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(0, 0),
    zoom: 2,
    zoomControl: false
  };

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

  // Set origin bounds
  var originBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-20, -100),
    new google.maps.LatLng(20, 20)
  );

  // Get left/right coords
  var left = originBounds.getSouthWest().lng();
  var right = originBounds.getNorthEast().lng();

  // Create editable rectangle
  var rectangle = new google.maps.Rectangle({
    bounds: originBounds,
    fillColor: 'white',
    fillOpacity: .5,
    editable: true,
    map: map
  });

  // Check for rectangle bounds changed
  google.maps.event.addListener(rectangle, 'bounds_changed', function() {

    // Get currents bounds and left/right coords
    var newBounds = rectangle.getBounds();
    var newLeft = newBounds.getSouthWest().lng();
    var newRight = newBounds.getNorthEast().lng();

    if ((newRight === left) || (newLeft === right)) {

      // User dragged "too far" left or right and rectangle got inverted
      // Invert left and right coordinates
      rectangle.setBounds(invertBounds(newBounds));
    }

    // Reset current left and right
    left = rectangle.getBounds().getSouthWest().lng();
    right = rectangle.getBounds().getNorthEast().lng();
  });
}

function invertBounds(bounds) {

  // Invert the rectangle bounds
  var invertedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()),
    new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getSouthWest().lng())
  );

  return invertedBounds;
}

initialize();

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>