使用用户定义的函数时，映射会消失

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

将user-claims定义移动到全局范围，并在确定地图已完全加载并定义其实例时在addMarker内调用它。第二个参数iniMap也应该是一个字符串，而不是一个对象。

title

Answer 2

两个问题：

1. 您需要在addMarker初始化地图之后调用initMap函数。最简单的方法是在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>