-1

Загрузка страниц, маркеры установлены и показаны, функции работают и т. Д. Все кажется прекрасным, но MarkerClusterer не работает. Что мне не хватает? предложения по оптимизации кода также приветствуются :)MarkerClusterer без ошибок, но ничего не делает

<script> 
 

 
var map; 
 
var markers = []; 
 

 
function loadjsonmarkerstomap() 
 
\t { 
 
\t $.getJSON("json.php", function(json1) 
 
\t \t { 
 
\t \t $.each(json1, function(key, data) 
 
\t \t \t { 
 
\t \t \t var latlng = new google.maps.LatLng(data.lat, data.lng); 
 
\t \t \t var infocontent = "<div style='width: 200px; height: 200px; border: 1px solid grey;'>ID: " + data.id + "<br/>Type: " + data.type + "<br/>Weight: " + data.weight + '<br/><input type="submit" value="Show"/></div>'; 
 
\t \t \t var marker = new google.maps.Marker(
 
\t \t \t \t { 
 
\t \t \t \t position: latlng, 
 
\t \t \t \t map: map, 
 
\t \t \t \t title: data.title 
 
\t \t \t \t }); 
 
\t \t \t var infowindow = new google.maps.InfoWindow({ content: infocontent }); 
 
\t \t \t marker.addListener('click', function() 
 
\t \t \t \t { 
 
\t \t \t \t infowindow.open(map, marker); 
 
\t \t \t \t }); 
 
\t \t \t markers.push(marker); 
 
\t \t \t }); 
 
\t \t }); 
 
\t 
 
\t } 
 

 
function clearLocations() 
 
\t { 
 
\t for (var i = 0; i < markers.length; i++) 
 
\t \t { 
 
\t \t markers[i].setMap(null); 
 
\t \t } 
 
\t \t markers.length = 0; 
 
\t } 
 

 
$('#clear').click(
 
\t function() 
 
\t \t { 
 
\t \t clearLocations(); 
 
\t \t } 
 
\t); 
 
\t 
 
$('#load').click(
 
\t function() 
 
\t \t { 
 
\t \t loadjsonmarkerstomap(); 
 
\t \t } 
 
\t); 
 

 

 
function initMap() 
 
\t { 
 
\t map = new google.maps.Map(document.getElementById('map'), 
 
\t \t { 
 
\t \t center: {lat: 46.30499, lng: 25.292647}, // 
 
\t \t zoom: 8 // 
 
\t \t }); 
 

 
\t loadjsonmarkerstomap(); // 
 
\t 
 
\t var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'images/m'}); 
 

 
\t } 
 
\t 
 

 

 
</script>

+1

Я считаю, что это может быть не так, потому что маркеры выбираются асинхронно. Например, когда вы запускаете свой 'loadjsonmarkerstomap()', а затем сразу же запускаете свой кластер. Массив маркеров по-прежнему пуст. Вы должны обязательно запустить кластер после успешного вызова ajax. –

+0

Вы хотите поставить var markerCluster вне функции initMap()? – mee

+2

Нет, скорее поместите «var markerCluster = новый MarkerClusterer (карта, маркеры, {imagePath: 'images/m'}); \t} 'внутри обратного вызова вашего вызова ajax. Например, непосредственно после цикла '$ .each (json1..' –

ответ

1

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

Необходимо выполнить запуск кластера после успешного вызова ajax.

var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'images/m'}); } 

Должно войти внутрь обратного вызова вашего вызова ajax. Например, непосредственно после вашего $.each(json1.. loop