数据层在事件侦听器中没有响应（Google Maps API）

时间：2018-04-23 19:53:09

标签： javascript google-maps google-maps-api-3

我有一个函数，我将geoJSON加载到地图中，然后在达到特定缩放级别时替换它。当window.map.data.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
        });
      });
    };
  };
});

我按照How to remove data from 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 个答案:

答案 0 :(得分：12)

在我看来，您要为每个数据集创建一个DataLayer。然后根据缩放级别管理这些。在第一次可见时创建它们，当它们被隐藏时将它们的map属性设置为null，当你希望它们可见时，将它们设置为map变量。

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);
  }
});

proof of concept fiddle

代码段

＆＃13;
＆＃13; 
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]
        ]
      ]
    }
  }, ]
};
＆＃13; 
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题