將MarkerClusterer應用於Google Maps API

我知道這已經被覆蓋了很多，它的一個簡單的調整使其工作，但這使得它更令人沮喪。將MarkerClusterer應用於Google Maps API

我是Google Maps API V3和Javascript的新手。我設法制作了一個帶有標記的地圖，但我想要實現標記聚類器功能。

我的代碼如下：

<script type="text/javascript"> 
var markers = [ 
['Wathegar', 58.443420, -3.247061, '/Projects/Wathegar/', '/images/MapsIcons/operational.png'], 
['Wathegar 2', 58.436726, -3.216505, '/Projects/Wathegar_2/', '/images/MapsIcons/consented.png'], 
['Sibmister', 58.570869, -3.429623, '/Projects/Sibmister/', '/images/MapsIcons/planning.png'], 
['Humbleburn', 54.851982, -1.651425, '/Projects/Humbleburn/', '/images/MapsIcons/planning.png'], 
['Achlachan', 58.449348, -3.452797, '/Projects/Achlachan/', '/images/MapsIcons/pre-planning.png'], 
['Bonwick', 53.955025, -0.227451, '/Projects/Bonwick/', '/images/MapsIcons/pre-planning.png'], 
['Garton', 54.033081, -0.494127, '/Projects/Garton/', '/images/MapsIcons/pre-planning.png'], 
['Hill of Lybster', 58.603081, -3.679004, '/Projects/Hill-of-Lybster/', '/images/MapsIcons/planning.png'], 
['Moota', 54.710442, -3.331947, '/Projects/Moota/', '/images/MapsIcons/pre-planning.png'], 
['Sherburn Stone', 54.770432, -1.4593797, '/Projects/Sherburn-Stone/', '/images/MapsIcons/pre-planning.png'], 
['Spring Brook', 53.498360, -1.624646, '/Projects/Spring_Brook/', '/images/MapsIcons/pre-planning.png'], 
['Sunnyside', 55.387691, -3.949585, '/Projects/Sunnyside/', '/images/MapsIcons/pre-planning.png'], 
['Thacksons Well', 52.955578, -0.759824, '/Projects/Thacksons_Well/', '/images/MapsIcons/pre-planning.png'], 
]; 
function initializeMaps() { 
var latlng = new google.maps.LatLng(56.2, -2,5); 
var myOptions = { 
    zoom: 6, 
    center:latlng, 
    mapTypeId: google.maps.MapTypeId.HYBRID, 
    mapTypeControl: false, 
    panControl: false, 
    zoomControl: true, 
    zoomControlOptions: { 
style: google.maps.ZoomControlStyle.SMALL 
    }, 
    streetViewControl: false, 
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
var infowindow = new google.maps.InfoWindow(), marker, i; 
for (i = 0; i < markers.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(markers[i][1], markers[i][2]), 
     map: map, 
     url:markers[i][3], 
     icon:markers[i][4] 
}); 
google.maps.event.addListener(marker, 'click', function() { 
window.location.href = this.url; 
}); 
} 
} 
</script>

我試過在this example使用連同其他一些博客的格式重建它，但我沒有JS的一個很好的理解不夠知道我需要做什麼。

任何幫助將不勝感激。謝謝！

來源

2013-02-25 JonnyHarper

JSON的格式正常，它對MarkerClusterer沒有任何影響。

你所缺少的是創建MarkerClusterer的一個實例，並標記添加到該實例：

var mc = new MarkerClusterer(map),//MarkerClusterer-instance 
    marker, i; 
for (i = 0; i < markers.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(markers[i][1], markers[i][2]), 
     map: map, 
     url:markers[i][3], 
     icon:markers[i][4] 
}); 

google.maps.event.addListener(marker, 'click', function() { 
window.location.href = this.url; 
}); 
mc.addMarker(marker);//add the marker to the MarkerClusterer 
}

請注意：鏈接的頁面使用MarkerClusterer的地圖，API-V2，對於V3使用此更新版本： http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js

來源

2013-02-25 23:02:31

非常感謝，我一直試圖讓它工作幾個小時！ – JonnyHarper 2013-02-26 08:41:52

您也可以在推單全力以赴標記來MarkerClusterer

var marker, i; 
var markersArray = []; 
for (i = 0; i < markers.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(markers[i][1], markers[i][2]), 
     map: map, 
     url:markers[i][3], 
     icon:markers[i][4] 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
    window.location.href = this.url; 
    }); 
    markersArray.push(marker); 

} 
var mc = new MarkerClusterer(map,markersArray),//MarkerClusterer-instance which add all markers to the MarkerClusterer

來源

2013-02-26 17:28:49 Ankit

將MarkerClusterer應用於Google Maps API

回答

相關問題