Question

以下是我正在使用的代码。当缩放级别为＆gt; = 8但我不知道要添加什么时，我试图以某种方式使该多边形消失。我尝试过添加不同的变量和事件监听器，但到目前为止还没有任何工作。我也尝试过if语句并打破了地图。

我是Javascript的新手，但了解基础知识并查看过多个论坛但没有成功。非常感谢任何建议。

TYIA！

Before/After Targets

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

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Gmaps插件。在缩放时隐藏多边形

2 个答案: