Это то, что я использую для отображения карты с 3 пинами / маркерами:
<script>
function initialize() {
var locations = [
['DESCRIPTION', 41.926979, 12.517385, 3],
['DESCRIPTION', 41.914873, 12.506486, 2],
['DESCRIPTION', 41.918574, 12.507201, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(41.923, 12.513),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<div id="map" style="width: 900px; height: 700px;"></div>
То, что я ищу, это способ избежать необходимости «вручную» находить центр карты center: new google.maps.LatLng(41.923, 12.513)
. Есть ли способ автоматически центрировать карту по трем координатам?
javascript
google-maps
google-maps-api-3
google-maps-markers
MultiformeIngegno
источник
источник
Ответы:
Есть более простой способ - расширить пустой,
LatLngBounds
а не создавать его явно из двух точек. (Смотрите этот вопрос для более подробной информации)Должно выглядеть примерно так, добавлено в ваш код:
Таким образом, вы можете использовать произвольное количество точек, и вам не нужно знать порядок заранее.
Демоверсия jsFiddle здесь: http://jsfiddle.net/x5R63/
источник
setZoom
AFTERfitBounds
fitBounds
работал для меня в кратком тесте; дайте мне знать, если у вас все еще проблемы.map.panToBounds(bounds);
для автоматического увеличения.Я думаю, что вы должны рассчитать min широты и min долготы: Вот пример с функцией, чтобы использовать, чтобы центрировать вашу точку:
источник
Чтобы найти точный центр карты, вам нужно перевести координаты широты / долготы в координаты пикселя, а затем найти центр пикселя и преобразовать его обратно в координаты широты / долготы.
Вы можете не заметить или не заметить отклонения в зависимости от того, насколько далеко вы находитесь к северу или югу от экватора. Вы можете увидеть дрейф, выполнив map.setCenter (map.getBounds (). GetCenter ()) внутри setInterval, дрейф будет медленно исчезать по мере приближения к экватору.
Вы можете использовать следующее для перевода координат широты / долготы и пикселей. Координаты пикселей основаны на плоскости всего мира, полностью увеличенной, но затем вы можете найти центр этого и переключить его обратно в широту / долготу.
источник
Я использую описанный выше метод для установки границ карты, затем вместо сброса уровня масштабирования я просто вычисляю среднее значение LAT и среднее значение LON и устанавливаю центральную точку в этом месте. Я складываю все значения lat в latTotal и все значения lon в lontotal, а затем делю на количество маркеров. Затем я устанавливаю центральную точку карты на эти средние значения.
latCenter = latTotal / markercount; lonCenter = lontotal / markercount;
источник
у меня была ситуация, когда я не могу изменить старый код, поэтому добавил эту функцию javascript для вычисления центральной точки и уровня масштабирования:
источник
Вот мое мнение на этот случай, если кто-нибудь натолкнется на эту тему:
Это помогает защитить от нечисловых данных, уничтожающих любую из ваших конечных переменных, которые определяют
lat
иlng
.Он работает, принимая все ваши координаты, разбирая их на отдельные элементы
lat
иlng
элементы массива, а затем определяя среднее для каждой из них. Это среднее значение должно быть в центре (и подтвердилось в моих тестовых примерах).источник