javascript - Google map 自定义数据层在缩放时不触发

Question

由两部分组成的问题:我编写的 if 语句有什么问题(已修复)，我是否正确使用了 setMap(null)？

我有一张 map ，我想根据缩放级别显示不同的 geoJSON。当我设置以下内容时，我会在缩放时显示更精细的比例，但这只是附加的，而不是实际的更改:

   if ($('#map').length) {

  google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomLevel = map.getZoom();
    if (zoomLevel <= 11) {
      window.map.data.loadGeoJson( "toronto_regions.geojson" );

    }
    else {
      window.map.data.loadGeoJson( "districts.geojson" );
    }
  })

现在，我添加了一个 else if声明，只是为了稳定事情，直到事情变得更加复杂。然而，} elseif (zoomLevel <= 9) {反对 {作为意外的标识符，将其注释掉只会将问题传递给 else陈述。与此同时，我一直在尝试添加 setMap 方法，以在添加新内容之前清除旧 map 数据。

在清除语法问题时，我现在收到错误 InvalidValueError: setMap: not an instance of Map与 setMap 方法关联:

window.map.mapTypes.set('styled_map', styledMapType);
window.map.setMapTypeId('styled_map');

if ($('#map').length) {
  window.map.data.loadGeoJson( "cities.geojson" );
  google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomLevel = map.getZoom();
    if (zoomLevel < 12 || zoomLevel > 9) {
      window.map.data.setMap('null');
      window.map.setMapTypeId('styled_map');
      window.map.data.loadGeoJson( "cities.geojson" );
    } else if (zoomLevel <= 9) {
       window.map.data.setMap('null');
       window.map.setMapTypeId('styled_map');
       window.map.data.loadGeoJson( "county.geojson" );
    } else if (zoomLevel >= 11) {
       window.map.data.setMap('null');
       window.map.setMapTypeId('styled_map');
       window.map.data.loadGeoJson( "districts.geojson" );
    };
  })

任何有关 setMap 的输入都将不胜感激 - 操作 Google map 对我来说是新领域。

Answer 1

您有语法错误:

• elseif 应该是 else if
• } else (zoomLevel >= 11) { 应为 } else if (zoomLevel >= 11) {

我怀疑你想要window.map.data.setMap