[英]Google Maps marker grouping
我正在努力實現以下目標:在我的地圖上有不同類型的標記,例如學校,圖書館,公共汽車站,我希望能夠顯示/隱藏每組標記。
我一直在搜索谷歌一段時間但沒有出現:/
任何想法如何實現這一目標?
有多種方法可以解決這個問題,但讓我向您展示一種方法。
首先,讓我們從一系列位置開始(借用Google Maps API教程 ):
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
數組來存儲每個新標記,我們還可以使用其類別ID擴充每個標記對象:
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);
無論如何,那應該是一個好的開始。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.