javascript - 点击返回时 Google map API 中的 "TypeError: a is null"

Question

点击返回时，我在 Google map API 中收到“TypeError: a is null”和空白 map :

14:27:57.271 TypeError: a is null
_.Uf()js:82
Dg()js:90
initMap()map.php:36
Zg/<()js:96
lc/e<()js:49
_.ac()js:46
lc()js:49
<anonymous>js:130
google.maps.Load()js:21
<anonymous>js:130
<anonymous>js:26
1js:82:453

在标题部分我使用:

<script src="https://maps.googleapis.com/maps/api/js?v=3.25&
key=xxxxxxxxxxxxxxxxxxxxxxxxxxxx_yyyyyyyyyy&callback=initMap" async="" 
defer=""></script>
<script>
    var map;
    function initMap() {
        var center = {
            lat: 51.46606900136,
            lng: -2.5865578706776
        };
        map = new google.maps.Map(document.getElementById("map"), {
            center: center,
            zoom: 14,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({
            position: center,
            icon: "icon.png",
            map: map
        });
    }
</script>

主体部分有 map 元素:

<div id="map"></div>

map 第一次显示正常。这个问题似乎只在点击返回时出现，所以我猜测如果页面以这种方式重新加载，我需要以某种方式强制 JavaScript 再次执行。

Answer 1

我的猜测是，当您导航回 map 时，<div id=map></div> initMap之前尚未渲染函数被调用。要解决此问题，请将代码放在 <div id="map"></map> 之后的正文中:

代码片段:

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<script>
  var map;

  function initMap() {
    var center = {
      lat: 51.46606900136,
      lng: -2.5865578706776
    };
    map = new google.maps.Map(document.getElementById("map"), {
      center: center,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
      position: center,
      // icon: "icon.png",
      map: map
    });
  }
</script>