使用用戶定義的函數時地圖消失

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>