Уровень данных, не отвечающий в прослушивателе событий (API Карт Google)

У меня есть функция, где я загружаю geoJSON в карту, а затем заменяю ее, когда я нажимаю определенные уровни масштабирования. Следующее работает, когда window.map.data.setMap(null); закомментирован, но только для того, чтобы сваливать все карты по мере изменения уровня масштабирования. setMap(null) строк setMap(null) удаляет карту после изменения уровня масштабирования, но не позволяет заменить новый файл; Я постоянно получаю undefined при привязке слоя данных к переменной (см. Изображение в конце):

  if($('#map').length) {
    var styledMapType = new google.maps.StyledMapType(
      //this is all styling
    }
  ], {name: 'Styled Map'});

    var toronto = {lat: 43.687508, lng: -79.304293};

    if ($('#map').length) {
      window.map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: toronto,
        disableDefaultUI: false,
        scrollwheel: false,
        streetViewControl: false,
        fullscreenControl: false,
        mapTypeControl: false,
        zoomControl: true,

        });

        zoom: 16,
        center: listing_address,
        disableDefaultUI: false,
        scrollwheel: false,
        streetViewControl: false,
        fullscreenControl: false,
        mapTypeControl: false,
        });

    .var county = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "AREA_NAME": "Toronto Region", "Name": "", "Description": "" }, "geometry": { "type": "Polygon", "coordinates": [ [
[ -79.331290752373903, 43.6257878530946 ],
[ -79.331317617252296, 43.6256985447421 ],
[ -79.331512561913399, 43.625640321883701 ],
[ -79.331752709965201, 43.625618170498399 ],
[ -79.331959376709506, 43.625519457784897 ],
[ -79.332109811020601, 43.625312645786401 ],
[ -79.333209007789605, 43.644149630451302 ],
[ -79.333365435394498, 43.644032839820198 ],
[ -79.431165436417103, 43.630306805590003 ],
[ -79.431488362803094, 43.630361005759099 ],
[ -79.431821347539696, 43.630419711640798 ],
[ -79.432139201596499, 43.630500911132103 ],
[ -79.432442343991099, 43.630573099758003 ],
[ -79.475947295799898, 43.623398134852998 ],
[ -79.280866209706105, 43.671017401276799 ],
[ -79.307699740463903, 43.656122040811901 ],
[ -79.307771442967393, 43.655987140776503 ],
[ -79.331356425413802, 43.625806618446397 ],
[ -79.331290752373903, 43.6257878530946 ] ] ] } }
]
}

var district = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "AREA_ID": "108", "CITY_NAME": "", "CITY_NAME": "", "AREA_NAME": "Briar Hill-Belgravia" }, "geometry": { "type": "Polygon", "coordinates": [ [
[ -79.464620647999908, 43.692155605999957 ],
[ -79.46522206099992, 43.693230269999958 ],
[ -79.465251297999913, 43.693298486999957 ],
[ -79.465279791999919, 43.693366811999958 ],
[ -79.46530741699992, 43.693435416999954 ],
[ -79.465719907999926, 43.694757514999957 ],
[ -79.44101562199991, 43.705410816999958 ],
[ -79.440110285999921, 43.705585372999955 ],
[ -79.447685296999921, 43.696258794999956 ],
[ -79.449336555999921, 43.695897948999956 ],
[ -79.450278980999911, 43.695691998999955 ],
[ -79.451201995999909, 43.695476191999958 ],
[ -79.462902461999917, 43.69287652099996 ],
[ -79.463998089999919, 43.692404465999957 ],
[ -79.464620647999908, 43.692155605999957 ] ] ] } }
]
}

var cities ={
"type":"FeatureCollection", "features": [
{"type":"Feature","properties":

{"AREA_ID":49884,"AREA_NAME":"YORK","OBJECTID":11093905},"geometry":{"type":"Polygon","coordinates":[[[-79.49262446,43.64744493],
    [-79.49249144,43.64772528],
    [-79.49149894,43.65163426],
    [-79.50094749,43.65228262],
    [-79.503085,43.66113086],
    [-79.5123581,43.67258877],
    [-79.5126394,43.68922995],
    [-79.50556991,43.70925399],
    [-79.42776901,43.70053559],
    [-79.42848543,43.68173363],
    [-79.42909608,43.68160367],
    [-79.48394351,43.66992188],
    [-79.48405475,43.66989696],
    [-79.48367372999999,43.66897745],
    [-79.49262446,43.64744493]]]}},
    ]
    }


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

    // issue in question below:
    if ($('#map').length) {
            window.map.data.loadGeoJson( cities );
  window.map.addListener('zoom_changed', function() {
    var zoomLevel = map.getZoom();
     if (zoomLevel <= 12 && zoomLevel >= 9) {
      window.map.data.addGeoJson( cities );
    } else if (zoomLevel < 9) {
      window.map.data.addGeoJson( county );

    } else if (zoomLevel > 12) {
      window.map.data.addGeoJson( district );
        };
      })

      window.map.data.setStyle({
        fillOpacity: 0.2,
        strokeWeight: 1,
        strokeColor: '#1e1d1d',
        fillColor: '#1e1d1d'
      });


      window.map.data.addListener('mouseover', function(event) {
        window.map.data.overrideStyle(event.feature, {
            strokeColor: '#0076c0',
            fillColor: '#0076c0',
            strokeWeight: 2.5,
        });
      });

      window.map.data.addListener('mouseout', function(event) {
        window.map.data.revertStyle();
      });

      window.map.data.addListener('click', function(event) {
        window.map.data.overrideStyle(event.feature, {
            strokeColor: '#0076c0',
            fillColor: '#0076c0',
            fillOpacity: 0.2
        });
      });
    };
  };
});

Я уже пробовал следующее: Как удалить данные из gmap? , Добавление этих переменных зависает выше первой строки моего кода или в качестве первого раздела функции до того, как оператор if дал мне неожиданные проблемы с идентификатором (я удалил фактический код, это была моя ссылка):

// load data - do the same for data2, data3 or whatever
data1 = new google.maps.Data();
data1.loadGeoJson(url1);

// create some layer control logic for turning on data1
data1.setMap(map) // or restyle or whatever

// turn off data1 and turn on data2
data1.setMap(null) // hides it
data2.setMap(map) // displays data2

И это результат, который я получаю, когда устанавливаю точки останова: breakpoints

Какая связь мне не хватает? Документы (https://developers.google.com/maps/documentation/javascript/reference/3.exp/#Data) показывают, что loadGeoJSON и zoomchange не совместимы с методами, что кажется маловероятным.

Ответ 1

Мне кажется, что вы хотите создать DataLayer для каждого набора данных. Затем управляйте ими на основе уровня масштабирования. Создайте их, когда они будут сначала видимыми, установите для их свойства карты значение null, когда они будут скрыты, к вашей переменной карты, если вы хотите, чтобы они были видимыми.

var districtLayer, cityLayer, countyLayer;
window.map.addListener('zoom_changed', function() {
  var zoomLevel = map.getZoom();
  if (zoomLevel < 12 && zoomLevel > 9) {
    // city level, hide district and county layers
    if (districtLayer && districtLayer.setMap)
      districtLayer.setMap(null);
    if (countyLayer && countyLayer.setMap)
      countyLayer.setMap(null);
    if (countyLayer && countyLayer.setMap)
      countyLayer.setMap(null);
    if (!cityLayer) {
      cityLayer = new google.maps.Data();
      cityLayer.addGeoJson(cities);
    }
    cityLayer.setMap(map);
  } else if (zoomLevel <= 9) {
    // county level, hide city and county layers
    if (cityLayer && cityLayer.setMap)
      cityLayer.setMap(null);
    if (districtLayer && districtLayer.setMap)
      districtLayer.setMap(null);
    if (!countyLayer) {
      countyLayer = new google.maps.Data();
      countyLayer.addGeoJson(county);
    }
    countyLayer.setMap(map);
  } else if (zoomLevel >= 12) {
    // city level, hide district and county layers
    if (cityLayer && cityLayer.setMap)
      cityLayer.setMap(null);
    if (countyLayer && countyLayer.setMap)
      countyLayer.setMap(null);
    if (!districtLayer) {
      districtLayer = new google.maps.Data();
      districtLayer.addGeoJson(district);
    }
    districtLayer.setMap(map);
  }
});

доказательство концепции скрипки

фрагмент кода:

function initialize() {
  var districtLayer, cityLayer, countyLayer;
  if ($('#map').length) {
    var toronto = {
      lat: 43.689577,
      lng: -79.453715
    };
    window.map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: toronto,
      disableDefaultUI: false,
      scrollwheel: false,
      streetViewControl: false,
      fullscreenControl: false,
      mapTypeControl: false,
    });

    window.map.addListener('zoom_changed', function() {
      var zoomLevel = map.getZoom();
      if (districtLayer && districtLayer.setMap)
        districtLayer.setMap(null);
      if (countyLayer && countyLayer.setMap)
        countyLayer.setMap(null);
      document.getElementById('zoom').innerHTML = zoomLevel;
      if (zoomLevel < 12 && zoomLevel > 9) {
        document.getElementById('zoom').innerHTML += ":city";
        if (countyLayer && countyLayer.setMap)
          countyLayer.setMap(null);
        if (!cityLayer) {
          cityLayer = new google.maps.Data();
          cityLayer.addGeoJson(cities);
        }
        cityLayer.setMap(map);
      } else if (zoomLevel <= 9) {
        document.getElementById('zoom').innerHTML += ":county";
        if (cityLayer && cityLayer.setMap)
          cityLayer.setMap(null);
        if (districtLayer && districtLayer.setMap)
          districtLayer.setMap(null);
        if (!countyLayer) {
          countyLayer = new google.maps.Data();
          countyLayer.addGeoJson(county);
        }
        countyLayer.setMap(map);
      } else if (zoomLevel >= 12) {
        document.getElementById('zoom').innerHTML += ":district";
        if (cityLayer && cityLayer.setMap)
          cityLayer.setMap(null);
        if (countyLayer && countyLayer.setMap)
          countyLayer.setMap(null);
        if (!districtLayer) {
          districtLayer = new google.maps.Data();
          districtLayer.addGeoJson(district);
        }
        districtLayer.setMap(map);
      }
    });
    google.maps.event.trigger(map, 'zoom_changed');
  }
}

google.maps.event.addDomListener(window, "load", initialize);
var county = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "AREA_NAME": "Toronto Region",
      "Name": "",
      "Description": ""
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-79.486178, 43.59873],
          [-79.514712, 43.719608],
          [-79.260958, 43.755659],
          [-79.230746, 43.634522],
          [-79.486178, 43.59873]
        ]
      ]
    }
  }]
};

var district = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "AREA_ID": "108",
      "CITY_NAME": "",
      "CITY_NAME": "",
      "AREA_NAME": "Briar Hill-Belgravia"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-79.464620647999908, 43.692155605999957],
          [-79.46522206099992, 43.693230269999958],
          [-79.465251297999913, 43.693298486999957],
          [-79.465279791999919, 43.693366811999958],
          [-79.46530741699992, 43.693435416999954],
          [-79.465719907999926, 43.694757514999957],
          [-79.44101562199991, 43.705410816999958],
          [-79.440110285999921, 43.705585372999955],
          [-79.447685296999921, 43.696258794999956],
          [-79.449336555999921, 43.695897948999956],
          [-79.450278980999911, 43.695691998999955],
          [-79.451201995999909, 43.695476191999958],
          [-79.462902461999917, 43.69287652099996],
          [-79.463998089999919, 43.692404465999957],
          [-79.464620647999908, 43.692155605999957]
        ]
      ]
    }
  }]
}

var cities = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties":

    {
      "AREA_ID": 49884,
      "AREA_NAME": "YORK",
      "OBJECTID": 11093905
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-79.49262446, 43.64744493],
          [-79.49249144, 43.64772528],
          [-79.49149894, 43.65163426],
          [-79.50094749, 43.65228262],
          [-79.503085, 43.66113086],
          [-79.5123581, 43.67258877],
          [-79.5126394, 43.68922995],
          [-79.50556991, 43.70925399],
          [-79.42776901, 43.70053559],
          [-79.42848543, 43.68173363],
          [-79.42909608, 43.68160367],
          [-79.48394351, 43.66992188],
          [-79.48405475, 43.66989696],
          [-79.48367372999999, 43.66897745],
          [-79.49262446, 43.64744493]
        ]
      ]
    }
  }, ]
};
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<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>
<div id="zoom"></div>
<div id="map"></div>