2013-04-26 84 views
2

我是超級綠色的,需要項目幫助。由於我對html和javascript的知識有限,因此我可以製作具有多個位置的Google地圖。這裏是我的代碼(原諒我,如果它是壞的,但它的工作):Google Maps API v3在特定縮放級別下方打開標記

<!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" 
    src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key="my key"&sensor=false"> 
</script> 
    <style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map { height: 100% } 
</style> 
</head> 
<body> 
<div id="map"></div> 

<script type="text/javascript"> 

var locations = [ 
[47.003088, -96.929448], 
[46.817268, -96.810024], 
[46.842064, -96.796163], 
[46.644816, -96.408616], 
[46.860142, -96.751281], 
[46.789894, -96.807715], 
[46.844050, -96.856140], 
[46.921464, -96.780208], 
[46.585881, -96.843754], 
[46.860947, -96.913269], 
[46.844127, -96.813441], 
[46.852872, -96.891369], 
[46.828628, -96.775868] 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 8, 
    center: new google.maps.LatLng(46.827, -96.846), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var marker, i; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][0], locations[i][1]), 
    map: map 
    }); 
} 
</script> 
</body> 
</html> 

我真正想要做的是有標記只有仔細縮放級別來吧。放大時我不需要它們。如果他們在我接近的時候出現,那將是完美的。

回答

1

我想你將不得不在ZOOM_CHANGED綁定事件這樣

google.maps.event.addListener(map, 'zoom_changed', function() { 
    var zoom = map.getZoom(); 
    if(zoom > minValue && zoom < maxValue) { 
     //show markers if not already there 
    } 
    else { 
     //remove markers if already there 
    } 
}); 

編輯

var locations = [ 
    [47.003088, -96.929448], 
    [46.817268, -96.810024], 
    [46.842064, -96.796163], 
    [46.644816, -96.408616], 
    [46.860142, -96.751281], 
    [46.789894, -96.807715], 
    [46.844050, -96.856140], 
    [46.921464, -96.780208], 
    [46.585881, -96.843754], 
    [46.860947, -96.913269], 
    [46.844127, -96.813441], 
    [46.852872, -96.891369], 
    [46.828628, -96.775868] 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 8, 
    center: new google.maps.LatLng(46.827, -96.846), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 


var markers = []; 

for (var i = 0; i < locations.length; i++) { 
    var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[i][0], locations[i][1]), 
       map: map 
       }); 
    markers.push(marker); 
} 

var minValue = , maxValue = ; 

google.maps.event.addListener(map, 'zoom_changed', function() { 
    var zoom = map.getZoom(); 
    if(zoom > minValue && zoom < maxValue) { 
     for (var i = 0; i < locations.length; i++) {  
     markers[i].setMap(map); 
     } 
    } 
    else { 
     for (var i = 0; i < locations.length; i++) {  
     markers[i].setMap(null); 
     } 
    } 
}); 
+0

感謝這麼多的幫助。原諒我的noobness,但我會把它放在代碼中? – 2013-04-26 21:11:44

+0

我已將minValue和maxValue留空。只要把你的價值觀。我認爲這會好的。如果不要忘記將你的問題標爲回答 – alkis 2013-04-26 21:27:51

+0

非常感謝,非常感謝,它有效,但只有一個。我加載地圖時會顯示標記。一旦我縮小並在較低的縮放級別再次出現(如我想要的),它們就會消失。我怎樣才能防止他們最初出現。我正在使用此頁面進行測試,如果有幫助: http://www.draac.com/javatester.html – 2013-04-26 21:39:37

相關問題