Группировка маркера Google Maps
Я пытаюсь достигнуть следующей вещи: Имейте различные типы маркеров на моей карте, например, школах, библиотеках, автобусных остановках, и я хочу смочь показать/скрыть каждую группу маркеров.
Я искал Google некоторое время, но ничто не подошло:/
Какие-либо идеи, как это может быть достигнуто?
2 ответа
Есть различные способы решения этой проблемы, но позвольте мне показать вам один подход.
Во-первых, давайте начнем с массива местоположений (заимствованных из Руководств по API Карт Google ):
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 1],
['Coogee Beach', -33.923036, 151.259052, 1],
['Cronulla Beach', -34.028249, 151.157507, 2],
['Manly Beach', -33.800101, 151.287478, 2],
['Maroubra Beach', -33.950198, 151.259302, 2]
];
На самом деле это массив массивов. Он представляет 5 австралийских пляжей, и у нас есть название, широта, долгота и категория. Категория в данном случае - это просто число для простоты.
Затем важно, чтобы мы сохранили ссылку на маркеры, которые мы создаем. Для этого мы можем использовать массив markers , в котором мы храним каждый новый маркер, и мы также можем дополнить каждый объект маркера его идентификатором категории:
var markers = [];
var i, newMarker;
for (i = 0; i < beaches.length; i++) {
newMarker = new google.maps.Marker({
position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
map: map,
title: beaches[i][0]
});
newMarker.category = beaches[i][3];
newMarker.setVisible(false);
markers.push(newMarker);
}
Наконец, когда нам нужно показать маркеры, мы можно просто перебрать массив markers и вызвать метод setVisible () в зависимости от того, какую категорию мы хотели бы показать.
Вы можете просмотреть следующий полный пример:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Categories</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px;"></div>
<input type="button" value="Show Group 1" onclick="displayMarkers(1);">
<input type="button" value="Show Group 2" onclick="displayMarkers(2);">
<script type="text/javascript">
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 1],
['Coogee Beach', -33.923036, 151.259052, 1],
['Cronulla Beach', -34.028249, 151.157507, 2],
['Manly Beach', -33.800101, 151.287478, 2],
['Maroubra Beach', -33.950198, 151.259302, 2]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.88, 151.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
var i, newMarker;
for (i = 0; i < beaches.length; i++) {
newMarker = new google.maps.Marker({
position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
map: map,
title: beaches[i][0]
});
newMarker.category = beaches[i][3];
newMarker.setVisible(false);
markers.push(newMarker);
}
function displayMarkers(category) {
var i;
for (i = 0; i < markers.length; i++) {
if (markers[i].category === category) {
markers[i].setVisible(true);
}
else {
markers[i].setVisible(false);
}
}
}
</script>
</body>
</html>
Снимок экрана из приведенного выше примера после нажатия кнопки «Показать группу 2»:
По сути, вам просто нужно хранить ссылки на объекты Marker в массиве, задавать их тип (школа, автобусная остановка и т.д.), а затем по какому-то событию перебирать их и скрывать/показывать по мере необходимости:
var markers = [];
// create Marker
marker.locType = 'school'; //as appropriate
function hideMarkersOfType(type) {
var i = markers.length;
while(i--) {
if (markers[i].locType == type) {
markers[i].setVisible(false);
}
}
}
// similar function showMarkersOfType() calling markers[i].setVisible(true);
В любом случае, это должно быть хорошим началом.