Question

<script src="https://maps.googleapis.com/maps/api/js?key=[KEY]&callback=initMap"
            async defer></script>
    <script>
            var user_lat,user_lng;
            var map;
            function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                            center: {lat:17, lng: 80},
                            zoom: 5
                            });
            }
            var marker = new google.maps.Marker({
                position: {lat:17,lng:80},
                map: map,
                title: 'Hello World!'
            }); 
    </script>

这是出于测试目的。我必须在另一个代码中使用这个概念。请帮助。

这可能是重复的。还有很多其他帖子报告相同的错误，但没有一个答案解决了我的问题。

地图正在加载没有任何问题。 initMap（）函数被执行。但标记部分不会到来。

Answer 1

由于您具有async和defer属性，因此延迟执行api库。在定义marker时，浏览器仍然没有加载库，因此未定义google.maps.Marker。

将代码移动到initMap()函数中定义标记的位置，它应该可以正常工作。

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVD0ngfhOFs5rnww7UFyz9rN6UznOIZ1U&callback=initMap" async defer></script>
<script>
  var user_lat,user_lng;
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat:17, lng: 80},
      zoom: 5
    });
    var marker = new google.maps.Marker({
      position: {lat:17,lng:80},
      map: map,
      title: 'Hello World!'
    }); 
  }
</script>

var user_lat, user_lng;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 17,
      lng: 80
    },
    zoom: 5
  });
  var marker = new google.maps.Marker({
    position: {
      lat: 17,
      lng: 80
    },
    map: map,
    title: 'Hello World!'
  });
}

html,
body,
#map {
  height: 100%;
  width: 100%;
}

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

Answer 2

您使用async标志加载脚本。这意味着浏览器不会等到此脚本完成加载。

在执行new google.maps.Map(时，它仍未加载，执行失败。从async defer标记中删除script标记，并使其同步加载。

如果希望异步加载脚本，则需要使用callback函数。

未捕获的ReferenceError：谷歌未在google.maps.Marker（）中定义

2 个答案: