Google Maps API v3 Activer les marqueurs en dessous d'un certain niveau de zoom

Je suis super vert et j'ai besoin d'aide pour un projet. Avec ma connaissance limitée du html et du javascript, j'ai pu faire une carte google avec un certain nombre d'endroits. Voici mon code (pardonnez-moi si elle est mauvaise, mais il a travaillé):Google Maps API v3 Activer les marqueurs en dessous d'un certain niveau de zoom

<!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>

Ce que je veux vraiment faire est d'avoir les marqueurs se allument seulement à un niveau de zoom plus. Je n'en ai pas besoin quand je fais un zoom arrière. S'ils venaient quand j'étais proche, ça serait parfait.

Source

2013-04-26 Franklin Jackson

Je pense que vous devrez lier l'événement comme celui-ci 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 
    } 
});

EDIT

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); 
     } 
    } 
});

Source

2013-04-26 20:58:18 alkis

Merci beaucoup pour l'aide. Pardonnez ma noobness, mais où placerais-je cela dans le code? –

J'ai laissé les valeurs minValue et maxValue vides. Il suffit de mettre vos valeurs. Je pense que ça ira. Si c'est n'oubliez pas de marquer votre question comme réponse – alkis

Génial merci beaucoup, ça marche, mais une prise. Les marqueurs apparaissent lorsque je charge la carte. Ils disparaissent une fois que je fais un zoom et que je réapparaisse (comme je le veux) au niveau de zoom inférieur. Comment puis-je les empêcher de se présenter initialement. J'utilise cette page pour tester si cela aide: http://www.draac.com/javatester.html –

Google Maps API v3 Activer les marqueurs en dessous d'un certain niveau de zoom

Répondre

Questions connexes