未捕获的ReferenceError:谷歌未在google.maps.Marker()中定义

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>