У меня есть проект, в котором используются jquery-map-ui и MarkerClustererPlus.
Все работает как надо, но не хватает одного:
Всякий раз, когда центр карты изменяется (dragend), я перезагружаю результаты (маркеры) через Ajax, а также отображаю классический список результатов из 10 лучших записей под картой (для «невизуальных пользователей»).
Я хотел бы, чтобы то же самое происходило, когда пользователь нажимает кнопку кластера маркеров (центр карты и масштабирование изменяются, но я не могу справиться с этим, чтобы запустить свое собственное событие (перезагрузка списка лучших результатов на основе новый центр карт) ...
Итак, вопрос: как я могу запустить свою функцию, когда кто-то нажимает на ClusterMarker и карта центрируется ... к сожалению, событие dragend здесь не работает. Также поиграл с функцией «щелчка» markerClusterer, но не заставил ее работать :-(
Вот что я использую прямо сейчас... на основе: http://code.google.com/p/jquery-ui-map/ и http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/docs/reference.html.
Обновление: в основном я ищу возможность/совет о том, как встроить функции, как показано здесь http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/examples/events_example.html в мой код:
$(function()
{
getMarkersByLatitudeAndLongitude(); //call function to load map and markers on initial load
$('#map').gmap().bind('init', function(event, map)
{
$(map).dragend(function()
{
getMarkersByLatitudeAndLongitude(); //reload Map and Markers, if Map has been moved
});
$(map).addEventListener('zoom_changed', function()
{
var initial_zoom = $('#map').gmap('option', 'zoom'); //reload Map & Markers, if Zoom level has been changed and if we need more results
var new_zoom = $("#map").gmap('get', 'map').getZoom();
if(new_zoom<=initial_zoom ) getMarkersByLatitudeAndLongitude();
});
});
function getMarkersByLatitudeAndLongitude()
{
var latlng = $("#map").gmap('get', 'map').getCenter();
var zoom = $("#map").gmap('get', 'map').getZoom();
var i = 0;
$('#map').gmap('closeInfoWindow'); // close any open info window
$('#map').gmap('clear', 'markers'); // remove all markers
$('#map').gmap('get', 'MarkerClusterer').clearMarkers(); //remove all cluster markers
//get results to be display via json
$.getJSON( '/code/get_json_data.php', { 'latitude': latlng.lat(), 'longitude': latlng.lng() ,'zoom': zoom }, function(data)
{
if(data)
{
$.each( data.markers, function(i, marker)
{
if(i<10)
{
for_list = for_list + "|" + marker.id ; //remember the first 10 markers to be display in Details Results List under the Map
i++;
}
$('#map').gmap('addMarker',
{
'position': new google.maps.LatLng(marker.la, marker.lo),
'icon':marker.m,
'title':marker.n,
'bounds':false
})
.click(function()
{
var content = load_content(marker.f);
$('#map').gmap('openInfoWindow',{ 'content': content}, this); // get Marker Content on Click. function load_content gets the content via Ajax
});
});
// let Marker Clusterer do his work
$('#map').gmap('set', 'MarkerClusterer', new MarkerClusterer($('#map').gmap('get', 'map'), $('#map').gmap('get', 'markers'), {
'maxZoom':12,
'gridSize': 45,
'title':'Click to zoom in'
}));
//Load an generate the Detail List
$.post('/code/get_details_for_list.php', { list: for_list } , function(data) {
$('#detail_list').html(data);
});
// add Marker for center position
$('#map').gmap('addMarker',
{
'position': latlng.lat() + ',' + latlng.lng(),
'icon' : '/code/geo/images/gmap_pin_blue.png',
'title' : 'Center of your Search'
});
}
});
}
Любая подсказка в правильном направлении высоко ценится. Было бы достаточно, если бы мне удалось предупредить новые координаты Map Center после события click markerClusterer.
Спасибо за вашу помощь!