Как сделать так, чтобы карта покрывала все маркеры в javascript? - PullRequest
Новая
       43

Как сделать так, чтобы карта покрывала все маркеры в javascript?

0 голосов
/ 26 апреля 2020

У меня проблема с Google Map в javascript, я не могу сделать так, чтобы все маркеры соответствовали границам. Виден только первый маркер. Это ошибка, выдаваемая в консоли:

необработанное исключение: InvalidValueError: не является LatLngBounds или LatLngBoundsLiteral: не является объектом

И это код, который я использую: 

var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: parseFloat(lat), lng:parseFloat(lng)},
    zoom: 11
});

var bounds = new google.maps.LatLngBounds();

for(var i = 0; i < coordinates.length; i++){

    var coords = {lat: parseFloat(lat), lng:parseFloat(lng)}

    var marker = new google.maps.Marker({position: coords, map: map});
    var infowindow = new google.maps.InfoWindow();

    infowindow.setContent(lat);
    infowindow.open(map, marker);

    bounds.extend(marker.position);

}

map.setCenter(bounds.getCenter());
map.fitBounds(bounds);

У меня есть 4 маркера на карте, но карта увеличена и центрирована по последнему добавленному, как показано на изображении ниже:

enter image description here

Если я уменьшу карту, я смогу увидеть все другие маркеры, но fitbounds не работает, чтобы все маркеры соответствовали границам.

1 Ответ

0 голосов
/ 29 апреля 2020

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

пример кода: 

 var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 20,
    center: {lat: -33.9, lng: 151.2}
  });

var markerArray = [
  ['Bondi Beach', -33.890542, 151.274856],
  ['Coogee Beach', -33.923036, 151.259052],
  ['Cronulla Beach', -34.028249, 151.157507],
  ['Manly Beach', -33.80010128657071, 151.28747820854187],
  ['Maroubra Beach', -33.950198, 151.259302]
];

var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < markerArray.length; i++) {
    var marker = markerArray[i];
    var markerCoord = new google.maps.LatLng(marker[1],marker[2]);

    var marker = new google.maps.Marker({
      position: markerCoord,
      map: map
    });

     bounds.extend(markerCoord);
  }
  map.fitBounds(bounds);
}

Hope это помогает!

...