У меня есть функция, где я загружаю 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
И это результат, который я получаю, когда устанавливаю точки останова:
Какая связь мне не хватает? Документы (https://developers.google.com/maps/documentation/javascript/reference/3.exp/#Data) показывают, что loadGeoJSON и zoomchange не совместимы с методами, что кажется маловероятным.