Question

点击后，我在Google Maps API中收到“TypeError：a is null”和空白地图：

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>

正文部分包含地图元素：

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

地图第一次显示OK。这个问题似乎只发生在点回时，所以我猜我需要以某种方式强制Javascript再次执行，如果以这种方式重新加载页面。

Answer 1

我的猜测是，当您导航回地图时，<div id=map></div>在调用initMap函数之前尚未呈现。要解决此问题，请将代码放在<div id="map"></map>：

之后的正文中

代码段

＆＃13;

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

＆＃13;

<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>

＆＃13;

单击后面的Google Maps API中的“TypeError：a为null”

1 个答案: