Маркеры, окна информации и автоматически масштабируются, чтобы соответствовать всем маркерам в

77
9

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

<script type="text/javascript">
function initialize() {

// My options
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
}

// Create map on #map_canva
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Define boundarys
var markerBounds = new google.maps.LatLngBounds();

// Create array
var countries = [
{title:'Theatre by the Lake', lat:54.32223562211788, lon:-2.742498400000045, content:"<h2>Theatre by the Lake</h2>"},
{title:'Pirelli International Rally', content:"<h2>Pirelli International Rally</h2>"},
{title:'Lowther Castle', content:"<h2>Lowther Castle</h2>"},
{title:'South Lakes Wild Animal Park', content:"<h2>South Lakes Wild Animal Park</h2>"},
{title:'Cumbria Karting', content:"<h2>Cumbria Karting</h2>"},
];

// Create markers
for (var i = 0; i < countries.length; i++) {
var c = countries[i];
c.marker = new google.maps.Marker({
position: new google.maps.LatLng(c.lat, c.lon),
map: map,
icon: '/display_images/icon_stockist.png',
title: c.title});
c.infowindow = new google.maps.InfoWindow({content: c.content});
google.maps.event.addListener(c.marker, 'click', makeCallback(c));
// Create marker bounds
markerBounds.extend(countries);
}

// Create info windows based on above content
function makeCallback(country) {
return function () {
country.infowindow.open(map, country.marker);
};
}
}

// Fit map to marker boundaries
map.fitBounds(markerBounds);
</script>

спросил(а) 2021-01-27T19:05:20+03:00 4 месяца, 4 недели назад
1
Решение
63

Ваша проблема в том, что вы создаете карту как локальную переменную в своей инициализации, тогда вы пытаетесь получить к ней доступ с этой функцией, когда вы вызываете map.fitBounds, у которого нет доступа к ней.

Либо объявите карту с initialize, либо переместите map.fitBounds() в свою функцию инициализации.

Также при вызове markerBounds.extend(countries); , вы передаете ему весь массив стран, когда вам действительно нужно передать ему один объект LatLng. Попробуйте что-то вроде этого:

for (var i = 0; i < countries.length; i++) { 
var c = countries[i];
var latlng = new google.maps.LatLng(c.lat, c.lon);
c.marker = new google.maps.Marker({
position: latlng,
map: map,
icon: '/display_images/icon_stockist.png',
title: c.title});
c.infowindow = new google.maps.InfoWindow({content: c.content});
google.maps.event.addListener(c.marker, 'click', makeCallback(c));
// Create marker bounds
markerBounds.extend(latlng);
}

ответил(а) 2021-01-27T19:05:20+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема