getBounds (). содержит возврат false

Question

Я хочу, чтобы маркер был обнаружен и отображал значение, назначенное прямоугольнику. В результате исследований я обнаружил это , но в моем случае это неприменимо, так как мне нужна только точка с длинной точкой. Я нашел что-то похожее на то, что я хочу, и попробовал, а это здесь

Но, похоже, это не работает в моем случае. У меня есть прямоугольник ниже:

var rectangle1 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
  north: -37.822802,
  south: -37.822260,
  east: 145.036010,
  west: 145.035324
}
});

И я попытался вставить точку, которая равна -37.822545, 145.035526, и эта точка находится внутри прямоугольника, и она должна возвращать true, но это не так. Вот мой JSfiddle

Answer 1

Я думаю, вы просто перепутали параметры севера и юга. (Большее отрицательное значение широты находится южнее, чем меньшее)

function initMap() {


var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 19,
    center: {
      lat: -37.82280243352756,
      lng: 145.0353240966797
    },
    mapTypeId: 'terrain'
  });

  var rectangle1 = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      south: -37.822802,  // This is further south ...
      north: -37.822260,  // than this
      east: 145.036010,
      west: 145.035324
    }
  });
  alert(rectangle1.getBounds());
  alert(rectangle1.getBounds().contains({lat:-37.822545, lng:145.035526}));
}

При таком переключении севера и юга js-fiddle возвращает true.

Answer 2

Похоже, что LatLngLiteralBounds вход для google.maps.Rectangle не работает.Создает прямоугольник с обратным севером и югом.С вашим исходным прямоугольником (north: -37.822802, south: -37.822260) я получаю:

NE1:-37.822802,145.03601  (north=-37.822802, incorrect)
SW1:-37.82226,145.035324  (south=-37.82226, incorrect) 

, тогда как, если я создаю прямоугольник с объектом google.maps.LatLngBounds, я получаю:

NE2:-37.82226,145.03601   (north=-37.82226, correct)
SW2:-37.822802,145.035324 (south=-37.822802, correct)

подтверждение концепции скрипта

(синие маркеры означают NE / SW из rectangle2, красные маркеры - NE/ SW из rectangle1.)

кто-то должен создать проблему в системе отслеживания проблем

фрагмент кода:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 19,
    center: {
      lat: -37.82280243352756,
      lng: 145.0353240966797
    },
    mapTypeId: 'terrain'
  });
  var rectangle1 = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: -37.822802,
      south: -37.822260,
      east: 145.036010,
      west: 145.035324
    }
  });
  var rectangle2 = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: new google.maps.LatLngBounds(
      new google.maps.LatLng(-37.822802, 145.035324), // SW
      new google.maps.LatLng(-37.822260, 145.036010)) // NE
  });
  var marker = new google.maps.Marker({
    map: map,
    position: {
      lat: -37.822545,
      lng: 145.035526
    },
    title: "-37.822545, 145.035526"

  });
  var NEmark1 = new google.maps.Marker({
    map: map,
    position: rectangle1.getBounds().getNorthEast(),
    title: "NE1:" + rectangle1.getBounds().getNorthEast().toUrlValue()
  });
  var SWmark1 = new google.maps.Marker({
    map: map,
    position: rectangle1.getBounds().getSouthWest(),
    title: "SW1:" + rectangle1.getBounds().getSouthWest().toUrlValue()
  });
  var NEmark2 = new google.maps.Marker({
    map: map,
    position: rectangle2.getBounds().getNorthEast(),
    title: "NE2:" + rectangle2.getBounds().getNorthEast().toUrlValue(),
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
  });
  var SWmark2 = new google.maps.Marker({
    map: map,
    position: rectangle2.getBounds().getSouthWest(),
    title: "SW2:" + rectangle2.getBounds().getSouthWest().toUrlValue(),
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
  });
  map.fitBounds(rectangle1.getBounds());
  console.log(rectangle1.getBounds().toUrlValue());

  console.log("NE1:" + rectangle1.getBounds().getNorthEast().toUrlValue());
  console.log("SW1:" + rectangle1.getBounds().getSouthWest().toUrlValue());
  document.getElementById('contains').innerHTML = "rectangle1 bounds.contains=" + rectangle1.getBounds().contains({
    lat: -37.822545,
    lng: 145.035526
  });
  console.log(marker.getPosition().toUrlValue());
  console.log(rectangle2.getBounds().toUrlValue());
  console.log("NE2:" + rectangle2.getBounds().getNorthEast().toUrlValue());
  console.log("SW2:" + rectangle2.getBounds().getSouthWest().toUrlValue());
  console.log(rectangle2.getBounds().contains({
    lat: -37.822545,
    lng: 145.035526
  }));
  document.getElementById('contains').innerHTML += " rectangle2 bounds.contains=" + rectangle2.getBounds().contains({
    lat: -37.822545,
    lng: 145.035526
  });
  console.log(rectangle2.getBounds().contains(marker.getPosition()));
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 95%;
  width: 100%;
}

<div id="contains"></div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>