9
votes

Google-Maps v3: Comment changer le style de la carte en fonction du niveau de zoom?

J'utilise la nouvelle carte de style Google Maps V3.

Je veux modifier la manière dont la carte est styled basée sur le niveau de zoom.

J'ai le pseudo-code suivant, comment changer mon style de carte basé sur le niveau de zoom? xxx

merci d'avance

javascript google-maps google-maps-api-3

0 commentaires

3 Réponses :

19
votes

Utilisation du Google Maps API V3 , je mets ensemble Exemple de test de votre code source (avec des valeurs réelles afin de faire le test de test).

ci-dessous est le code que j'ai utilisé pour tester avec succès, le code principal pour faire attention à la fonction Démarrer (). xxx

2 commentaires

Quelles sont les 4 dernières lignes? J'ai utilisé votre réponse sur une carte et cela a fonctionné sans eux de toute façon.

Les quatre dernières lignes disent simplement à la page d'exécuter la fonction de démarrage lorsque la fenêtre est chargée (deux premières pour les navigateurs modernes, deuxième à des versions plus anciennes). Ils ne sont pas nécessaires si vous déclenchez la fonction d'une manière différente.

0
votes

J'ai été inspiré de la solution @staticbeast et j'ai fait des refactorings.

map.mapTypes.set('maximal', new google.maps.StyledMapType(mapStyleZoomedIn, {map: map, name: 'maximal'}));
map.mapTypes.set('minimal', new google.maps.StyledMapType(mapStyleZoomedOut, {map: map, name: 'minimal'}));
map.setMapTypeId('minimal');

google.maps.event.addListener(map, 'zoom_changed', function() {
  if (map.getMapTypeId() !== 'satellite') {
    map.setMapTypeId(map.getZoom() <= 8 ? 'min' : 'max');
  }
});

0 commentaires

1
votes

Fonction simple qui va à Satellite lorsque l'utilisateur est zoomé dans la feuille de route lors de zoomé sur

google.maps.event.addListener(map, 'zoom_changed', function() {
    if (map.getZoom() >= 15) {
        map.setMapTypeId('satellite');
    }
    else {
        map.setMapTypeId('roadmap');
    }
});

0 commentaires