Kml层在刷新后工作正常，但给定typeError:无法读取属性getMap.第一次加载时

Kml layer works fine after refresh but give typeError: cannot read property getMap. on first load

本文关键字：typeError 读取 属性 加载 第一次 getMap 刷新 工作 Kml      更新时间：2023-11-14

你好，这是我第一次使用kml。一切都很顺利，直到我重定向到位。如果我直接点击页面，那么一切都很好，但如果我将用户从其他页面（如登录）重定向到我的地图页面，则kml层不起作用，并给出我上面提到的错误。但我刷新页面后一切正常。这是我的kml代码，刷新一次后即可工作。

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9CYHJG1297Ska0QoflD056gg&callback=initMap"
    async defer></script>
<script type="text/javascript">
var layers = [];
layers[0] = new google.maps.KmlLayer("http://wrf1.domain.edu/bipush/kml/plot_5253.kml",
  {
    preserveViewport: true
  });
layers[1] = new google.maps.KmlLayer("http://wrf1.domain.edu/bipush/kml/plot_5254.kml",
      {
    preserveViewport: true
  });
    var map;
function initialize() {
  var latlng = new google.maps.LatLng(24.5584261, 73.6870176 );
  var myOptions = {
    zoom: 11,
    center: latlng,
    mapTypeIds: google.maps.MapTypeId.ROADMAP,
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    }
  }
  map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function toggleLayers(i) {
  if (layers[i].getMap() == null) {
    layers[i].setMap(map);
  } else {
    layers[i].setMap(null);
  }
  //document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>";
}
google.maps.event.addDomListener(window, 'load', initialize);

将"async defer"与异步回调一起使用，或者使用onload侦听器，不要将两者同时使用。

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9CYHJG1297Ska0QoflD056gg&callback=initMap"
async defer></script>
google.maps.event.addDomListener(window, 'load', initialize);

（您可能有一个关于未定义initMap的javascript错误）这是一个选项：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9CYHJG1297Ska0QoflD056gg></script>
google.maps.event.addDomListener(window, 'load', initialize);

代码片段：

var layers = [];
layers[0] = new google.maps.KmlLayer({
  url: "http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSoutheastern_kml.xml",
  // preserveViewport: true
});
layers[1] = new google.maps.KmlLayer({
  url: "http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml",
  // preserveViewport: true
});
var map;
function initialize() {
  var latlng = new google.maps.LatLng(24.5584261, 73.6870176);
  var myOptions = {
    zoom: 11,
    center: latlng,
    mapTypeIds: google.maps.MapTypeId.ROADMAP,
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP
    }
  }
  map = new google.maps.Map(document.getElementById("map"), myOptions);
  toggleLayers(0);
  toggleLayers(1);
  var btns = document.getElementsByClassName("btn");
  for (var i = 0; i < btns.length; i++) {
    google.maps.event.addDomListener(btns[i], 'click', (function(i) {
      return function() {
        toggleLayers(i);
      }
    })(i));
  }
}
function toggleLayers(i) {
  if (layers[i].getMap() == null) {
    layers[i].setMap(map);
  } else {
    layers[i].setMap(null);
  }
  google.maps.event.addListener(layers[i], 'status_changed', function() {
    document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>";
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
  height: 100%;
  width: 100%
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input class="btn" value="0" type="button" />
<input class="btn" value="1" type="button" />
<div id="status"></div>
<div id="map"></div>

相关文章：