Gmaps Plugin. Verstecken Polygone auf Zoom

Question

Unten ist der Code, den ich verwende. Ich versuche, dieses Polygon irgendwie verschwinden zu lassen, wenn die Zoomstufe> = 8 ist, habe aber keine Ahnung, was ich hinzufügen soll. Ich habe versucht, verschiedene Variablen und einen Event-Listener hinzuzufügen, aber nichts hat bisher funktioniert. Ich habe auch eine if-Anweisung ausprobiert und dabei die Karte kaputt gemacht.

Ich bin neu in Javascript, aber verstehe die Grundlagen und habe durch mehrere Foren ohne Erfolg geschaut. Irgendwelche Vorschläge werden sehr geschätzt.

TYIA!

$(document).ready(function(){ 
    map = new GMaps({ 
    div: '#map', 
    lat: 55, 
    lng: -94, 
    zoom: 4, 
    });  

var sask = 
    [[60.000000, -110.000000], 
    [60.000000, -102.000000], 
    [55.812800, -101.999997], 
    [48.999473, -101.362495], 
    [48.999611, -110.004478], 
    [49.000059, -110.005026]]; 

var poly = map.drawPolygon({ 
    paths: sask, 
    fillColor: '#B3B300', 
    strokeColor: '#BBD8E9', 
    strokeOpacity: 0.5, 
    strokeWeight: 1, 
    fillOpacity: 0.3 
    }); 
}); 

Answer 1

google.maps.Map Objekte unterstützt zoom_changed Ereignis und google.maps.Polygon Objekt hat setVisible Verfahren, mit dem Sie können/zeigen die Poly verstecken. Überprüfen Sie the docs für weitere Informationen.

Für den Zugriff auf google.maps.Map Objekt in Gmaps in Ihrem Projekt müssen Sie map.map verwenden. Fügen Sie diese auf Ihren Code und es sollte funktionieren:

google.maps.event.addListener(map.map, 'zoom_changed', function(){ 
    if(map.map.getZoom() >= 8){ 
     poly.setVisible(false); 
    }else{ 
     poly.setVisible(true); 
    } 
}); 

Answer 2

Das google.maps.Map Objekt ist map.map. Fügen Sie einen Ereignis-Listener zoom_changed hinzu und zeigen/verbergen Sie die Karte basierend auf Ihren Kriterien.

proof of concept fiddle

Code-Schnipsel:

$(document).ready(function() { 
 
    map = new GMaps({ 
 
    div: '#map', 
 
    lat: 55, 
 
    lng: -94, 
 
    zoom: 4, 
 
    }); 
 

 
    var sask = [ 
 
    [60.000000, -110.000000], 
 
    [60.000000, -102.000000], 
 
    [55.812800, -101.999997], 
 
    [48.999473, -101.362495], 
 
    [48.999611, -110.004478], 
 
    [49.000059, -110.005026] 
 
    ]; 
 

 
    var poly = map.drawPolygon({ 
 
    paths: sask, 
 
    fillColor: '#B3B300', 
 
    strokeColor: '#BBD8E9', 
 
    strokeOpacity: 0.5, 
 
    strokeWeight: 1, 
 
    fillOpacity: 0.3 
 
    }); 
 
    google.maps.event.addListener(map.map, 'zoom_changed', function() { 
 
    document.getElementById('zoom').innerHTML = map.getZoom(); 
 
    if (map.getZoom() >= 8) 
 
     poly.setMap(null); 
 
    else 
 
     poly.setMap(map.map); 
 
    }) 
 
});

body, 
 
html, 
 
#map { 
 
    height: 100%; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script> 
 
<div id="zoom"></div> 
 
<div id="map"></div>