Gmapsプラグイン。ズームでポリゴンを非表示にする

Question

以下は私が使用しているコードです。ズームレベルが> = 8のときに何とかそのポリゴンが消えるようにしようとしていますが、何を追加するのか分かりません。私はさまざまな変数とイベントリスナーを追加しようとしましたが、これまでに何も働いていません。 私もif文を試して、それを行っているマップを壊しました。

私はJavascriptを使い慣れていますが、基本を理解していて、複数のフォーラムを成功裏に見てきました。どんな提案も大歓迎です。

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オブジェクトzoom_changedイベントをサポートしており、google.maps.Polygonオブジェクトは、ポリを表示/非表示にすることができますどの使っsetVisible方法があります。詳細については、the docsをご確認ください。

google.maps.MapオブジェクトにGmapsというオブジェクトにアクセスするには、map.mapを使用する必要があります。あなたのコードにこれを追加し、それが動作するはずです：

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

Answer 2

google.maps.Mapオブジェクトがmap.mapです。 zoom_changedイベントリスナーを追加し、条件に基づいて地図を表示/非表示にします。

proof of concept fiddle

コードスニペット：

$(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>