Google Maps - кластерные маркеры
У меня есть Google Map (с использованием API V3), где мне нужно настроить кластеризацию маркеров. В основном местоположения маркеров загружаются через JSON, и он возвращает Issue (1 или 2), широту и долготу.
Я попытался установить кластеризацию, однако на карте ничего не отображается, хотя вызов JSON на самом деле возвращает точки. Вот то, что я придумал:
var map;
function myMap(){
var latlng = new google.maps.LatLng(35.94, 14.37);
var mapOptions = {
zoom: 10,
center: latlng,
panControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
zoomControl: true};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
loadMarkers();
}
function loadMarkers() {
var mcOptions = {gridSize: 50, maxZoom: 15};
var issueSevereMarkers = [];
var issueSlightMarkers = [];
markerIssueHigh = new google.maps.MarkerImage("img/icn_issue_high.png",
new google.maps.Size(10.0, 10.0),
new google.maps.Point(0, 0),
new google.maps.Point(5.0, 5.0)
);
markerIssueMedium = new google.maps.MarkerImage("img/icn_issue_medium.png",
new google.maps.Size(10.0, 10.0),
new google.maps.Point(0, 0),
new google.maps.Point(5.0, 5.0)
);
var issuePoints = $.ajax({
type: 'GET',
url: 'http://www.mydomain.com/php/markers.php?&jsoncallback=?',
dataType: 'JSONp',
timeout: 5000,
success: function(data) {
$.each(data, function(i,item){
if (item.Issue == 1) {
// If severely congested
var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
var issueSevereMarker = new google.maps.Marker({'position': latLng});
issueSevereMarkers.push(issueSevereMarker);
} else if (item.Issue == 2) {
// If slightly congested
var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
var issueSlightMarker = new google.maps.Marker({'position': latLng});
issueSlightMarkers.push(issueSlightMarker);
}
});
var markerClusterSevere = new MarkerClusterer(map, issueSevereMarkers);
var issueSlightMarkerCluster = new MarkerClusterer(map, issueSlightMarkers);
},
error: function(data) {
}
});
}
По сути, я делаю, что получаю результат из JSON, и если проблема относится к типу 1, я добавляю булавку в массив issueSevereMarkers, в противном случае я добавляю ее в массив IssueSlightMarkers. Это должно загрузить массивы с точками маркеров. Я не уверен, что я делаю что-то не так там.
Еще одна проблема, которую я имею, заключается в том, что кластер в основном возвращает пользовательский значок, который я предполагаю, когда маркеры группируются. Когда я увеличиваю масштаб и вижу отдельные маркеры, как я могу установить маркеры для использования изображений markerIssueHigh и markerIssueMedium?
Я использую кластер для V3 (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html)
1 ответ
Чтобы использовать ваши собственные значки, вам нужно сослаться на них в конструкторе google.maps.Marker.
if (item.Issue == 1) {
// If severely congested
var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
var issueSevereMarker = new google.maps.Marker({position: latLng,
icon:markerIssueHigh});
issueSevereMarkers.push(issueSevereMarker);
} else if (item.Issue == 2) {
// If slightly congested
var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
var issueSlightMarker = new google.maps.Marker({position: latLng,
icon:markerIssueMedium});
issueSlightMarkers.push(issueSlightMarker);
}
Не вижу ничего очевидного в том, почему ничего не появляется, вот ссылка на рабочую карту с кластеризатором (получает данные из XML, а не из JSON).
Этот похожий вопрос добавляет пользовательский маркер в кластер.