google-maps-api-3 - Google maps api3 - 在缩放更改时隐藏/显示多边形

Question

我在http://www.choptankelectric.coop/outages/google/visibility_test.html有一个测试页面，我想在加载页面时显示一个多边形，但在访问者达到缩放级别 > 13 时将其删除。

我已经注释掉了我在“查看源”顶部的尝试以及底部的“可见”参数。

顺便说一句，如果我插入 DOCTYPE，则地图不会显示。

TIA 对此有任何帮助。

Answer 1

您的页面没有 DOCTYPE 就不会显示，因为您的地图没有大小，应该是：

    <div id="map" style="width: 480px; height: 480px;"></div>

为“zoom_changed”添加一个监听器到地图：

google.maps.event.addListener(map, "zoom_changed", function() {
    if (map.getZoom() > 13) poly.setMap(null); 
    else poly.setMap(map);
});

工作示例

代码片段：

function initialize() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: new google.maps.LatLng(38.4, -75.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var poly = new google.maps.Polygon({
    path: AreaBoundary1,
    strokeWeight: 1,
    fillColor: '#55FF55',
    fillOpacity: 0.3
  });

  poly.setMap(map);
  google.maps.event.addListener(map, "zoom_changed", function() {
    if (map.getZoom() > 13) poly.setMap(null);
    else poly.setMap(map);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
var AreaBoundary1 = [
  new google.maps.LatLng(38.359476783305, -75.214501841143),
  new google.maps.LatLng(38.362345692658, -75.213715263721),
  new google.maps.LatLng(38.367366296974, -75.239013654585),
  new google.maps.LatLng(38.375427394827, -75.235459756599),
  new google.maps.LatLng(38.375228242261, -75.234478037591),
  new google.maps.LatLng(38.375273400367, -75.233228514797),
  new google.maps.LatLng(38.375616016941, -75.231891574705),
  new google.maps.LatLng(38.375936006851, -75.231339272304),
  new google.maps.LatLng(38.376233242401, -75.230990324745),
  new google.maps.LatLng(38.377330945634, -75.230379285494),
  new google.maps.LatLng(38.378245589651, -75.229739397276),
  new google.maps.LatLng(38.378680054926, -75.229245049172),
  new google.maps.LatLng(38.378862912696, -75.228896215845),
  new google.maps.LatLng(38.379090992824, -75.227501206487),
  new google.maps.LatLng(38.379295743902, -75.225205297693),
  new google.maps.LatLng(38.379592567387, -75.2240716986),
  new google.maps.LatLng(38.380117961665, -75.222676379481),
  new google.maps.LatLng(38.380552176823, -75.221804307849),
  new google.maps.LatLng(38.38105497306, -75.221048245618),
  new google.maps.LatLng(38.381649384079, -75.220350334809),
  new google.maps.LatLng(38.382175305985, -75.219943020852),
  new google.maps.LatLng(38.382792411234, -75.218983464046),
  new google.maps.LatLng(38.382906436343, -75.218373032062),
  new google.maps.LatLng(38.382837460919, -75.217850047386),
  new google.maps.LatLng(38.382882532651, -75.216513198939),
  new google.maps.LatLng(38.383133614228, -75.215553914681),
  new google.maps.LatLng(38.383773251117, -75.214187485867),
  new google.maps.LatLng(38.384184746827, -75.213722033425),
  new google.maps.LatLng(38.384476969132, -75.213511853601),
  new google.maps.LatLng(38.382637564283, -75.204264820299),
  new google.maps.LatLng(38.38519197244, -75.198823547699),
  new google.maps.LatLng(38.405577811602, -75.19034453901),
  new google.maps.LatLng(38.407028585378, -75.182599075765),
  new google.maps.LatLng(38.40722096122, -75.174076115614),
  new google.maps.LatLng(38.408363397248, -75.170436134806),
  new google.maps.LatLng(38.409309204558, -75.165281800201),
  new google.maps.LatLng(38.408901468414, -75.160340258055),
  new google.maps.LatLng(38.406765903601, -75.152595654452),
  new google.maps.LatLng(38.395190936758, -75.125505819646),
  new google.maps.LatLng(38.385642833873, -75.117728390668),
  new google.maps.LatLng(38.374856118103, -75.119631104135),
  new google.maps.LatLng(38.36627877377, -75.123365898101),
  new google.maps.LatLng(38.356385213645, -75.135886367449),
  new google.maps.LatLng(38.355748521369, -75.138697584933),
  new google.maps.LatLng(38.356588228882, -75.140827882168),
  new google.maps.LatLng(38.353966142431, -75.148677720414),
  new google.maps.LatLng(38.353399989815, -75.155934132108),
  new google.maps.LatLng(38.355773036555, -75.163013288465),
  new google.maps.LatLng(38.3570997232, -75.167760532105),
  new google.maps.LatLng(38.357490472371, -75.169648322129),
  new google.maps.LatLng(38.357697649263, -75.170984310809),
  new google.maps.LatLng(38.356877865946, -75.175023673389),
  new google.maps.LatLng(38.356928288534, -75.180281795915),
  new google.maps.LatLng(38.357135648358, -75.181937363443),
  new google.maps.LatLng(38.357479565684, -75.182924590933),
  new google.maps.LatLng(38.358006656962, -75.184027796508),
  new google.maps.LatLng(38.35789315148, -75.185131944698),
  new google.maps.LatLng(38.357326389225, -75.187567228589),
  new google.maps.LatLng(38.34928043721, -75.188915754557),
  new google.maps.LatLng(38.345843986823, -75.189137004871),
  new google.maps.LatLng(38.345367132702, -75.190008596877),
  new google.maps.LatLng(38.346404068602, -75.190624211995),
  new google.maps.LatLng(38.348624653027, -75.191329323286),
  new google.maps.LatLng(38.35058254734, -75.192057763342),
  new google.maps.LatLng(38.353025828197, -75.193483945018),
  new google.maps.LatLng(38.353438729258, -75.192835933727),
  new google.maps.LatLng(38.355365219959, -75.192351477338),
  new google.maps.LatLng(38.356135794137, -75.193697811043),
  new google.maps.LatLng(38.3563850507, -75.1941453725),
  new google.maps.LatLng(38.359110738339, -75.194142149659),
  new google.maps.LatLng(38.360686848599, -75.194015706074),
  new google.maps.LatLng(38.36087720196, -75.197844264232),
  new google.maps.LatLng(38.364907004794, -75.197548472384),
  new google.maps.LatLng(38.36634361825, -75.200520734765),
  new google.maps.LatLng(38.368920516308, -75.205852864658),
  new google.maps.LatLng(38.368558991925, -75.20777168909),
  new google.maps.LatLng(38.359476783305, -75.214501841143)
];

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

<script src="https://maps.google.com/maps/api/js"></script>
<div id="map"></div>