Я работаю в компании систем охранной сигнализации, и у нас есть опция в нашем сервисе по управлению программным обеспечением для экспорта, который позволяет говорить в следующем месяце о поддержке системы охранной сигнализации, которые связаны с картой google. Очень полезно, когда вы пытаетесь заказать все рядом для дня инженеров. Мои знания в HTML и CSS очень хороши, однако мой JS - это довольно угадающая работа, и все же, чтобы научиться этому!Борьба за внедрение кластеров Карт Google
Может ли один из вас очень знающих людей помочь мне с добавлением карты Google Map CLUSTERING в этот существующий экспортированный код? Чтобы сэкономить время и пространство, я включил только одно место в код примера. Я потратил часы и часы на чтение, но все еще борется.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 800px;"></div>
<script type="text/javascript">
var locations = [
["Mr Random Person OPD/0100", "Some Street<br>In England<br>TOWN<br>County<br>BB11 2AA", 51.5137737, -1.1424908, "FE7569"]
];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(51.5137737,-1.1424908),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
var pinColor = locations[i][4];
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 43),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map,
icon: pinImage,
shadow: pinShadow
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var content = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="secondHeading" class="secondHeading">'+
locations[i][0]+
'</h2>'+
'<div id="bodyContent">'+
locations[i][1]+
'</div>'+
'</div>';
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
Я в основном пытаются добиться этого:
https://developers.google.com/maps/articles/toomanymarkers/markerclustererfull.png
Вы не указали, какова конкретная проблема с кодом. Что он делает и что вы ожидаете от этого? – wvdz
В этом коде я удалил попытки добавить кластер маркеров карт. Мне нужно сгруппировать несколько маркеров при увеличении масштаба, чтобы показать количество в пределах области. –
Вот пример - https://developers.google.com/maps/articles/toomanymarkers/markerclustererfull.png –