Google 地图自定义数据层不会在缩放时触发

Question

两部分问题：我写的 if 语句有什么问题（已修复），我是否正确使用 setMap(null)？

我有一张地图，我想根据缩放级别显示不同的 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 方法来在添加新内容之前清除旧地图数据。

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

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 地图对我来说是新领域。

Answer 1

您有语法错误：

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

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

Google 地图自定义数据层不会在缩放时触发

Google Maps custom data layers not triggering on zoom

javascript

google-maps

geojson

google-maps-api-3