使用用户定义的函数时地图消失

Question

我是Js的新手，遇到一个无法解决的问题。 我正在尝试编写一个函数，以更快地在Google地图上创建标记。 问题是，当我要调用该函数时，整个地图都会消失，或者如果我将调用函数放置在其他地方，地图不会消失，但该功能将无法正常工作。 我认为我的问题是语法问题。 这是带有调用函数的代码，出于说明目的，将其放在随机位置：

var map;
 function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
   center: {lat: 37.621389, lng: -122.378945},
   zoom: 9
 });

 function addMarker(posx, title) {
  var marker = new google.maps.Marker( {
   position: posx,
   map: map,
   title: title
 });
 }
}

addMarker ({lat: 37.621389, lng: -122.378945}, {'SFO'});

这是我的第一次询问，因此，请问我是否需要提供更多信息或有关正确询问并遵守SO标准的其他提示。

Answer 1

问题在Maps API异步加载中中继。 我猜控制台中的第一个错误。

未捕获的ReferenceError：未定义addMarker

将addMarker定义移至全局作用域，并在确保确定地图已完全加载且已定义其实例时在iniMap调用它。 同样，第二个参数title应该是字符串，而不是对象。

var map;

function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
     center: {lat: 37.621389, lng: -122.378945},
     zoom: 9
    });
    // now add the marker.
    addMarker ({lat: 37.621389, lng: -122.378945}, 'SFO');
    //_____________________________________________^___^

}

function addMarker(posx, title) {
   var marker = new google.maps.Marker( {
     position: posx,
     map: map,
     title: title
   });
}

Answer 2

两个问题：

1. 通过initMap初始化地图后 ，需要调用addMarker函数。 最简单的方法是在initMap函数中调用它。

2. addMarker的第二个参数（标记的标题）需要为字符串。

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

 <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: 37.621389, lng: -122.378945 }, zoom: 9 }); function addMarker(posx, title) { var marker = new google.maps.Marker({ position: posx, map: map, title: title }); } addMarker({lat: 37.621389,lng: -122.378945}, 'SFO'); } </script> <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>