Google Maps API：設置用於添加標記/多段線的回調

Question

我試圖向生成的Google地圖添加多段線。多段線的座標是使用jQuery（getJSON函數）從我的Web服務器上的JSON文件中獲取的。但是，我遇到回調問題。我已經在單獨的JavaScript文件中定義了三個函數，它們是：

function initMap(callback) { 

    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     center: {lat: 34.397, lng: 150.644}, 
     scrollwheel: false, 
     zoom: 2 
    }); 

    callback(); 
} 

。

function setPath(callback) { 

    $.getJSON('./expOneActivityData.json', 

     function (data) { 

      //Some looping contstruct to navigate through my JSON file. 
     } 
    }) 

    callback(); 
}; 

。

function addPath() { 

    var trekLine = new google.maps.Polyline({ 

     path: expeditionCoordinates, 
     geodisc: true, 
     stokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    trekLine.setMap(map); 

} 

expedition座標是一個數組，每個元素都是具有經度和緯度屬性的對象。這被聲明爲一個全局變量，其值初始化發生在setPath（）的循環中。

在我的HTML文件，我有：

<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap"> 

當我試着使用initMap（的setpath（讓addpath））在腳本標籤來代替initMap，我從谷歌一個400錯誤的請求。在腳本標籤Ofcourse其只是「回調= initMap」給出了：在line

TypeError: callback is not a function 

發生的歷史與回調（）在initMap的定義。

那麼如何將函數傳遞給googleapis，函數本身也有回調？ （我的循環構造很好btw）。我嘗試添加「延遲」到googleapi script標籤，也給一個鏈接到我的JavaScript文件。我刪除了所有回調的東西，只執行循環。我希望expeditionCoordinates陣列將完成初始化的googleapi腳本標籤excecuted之前，雖然沒有工作或者（地圖仍然加載，只是沒有折線）。

我是相當新的Javascript和它的異步性，雖然我知道他們是如何工作的，並已成功地與他們在一個星期左右基層工作。 。

（實際上我引到一個側面的問題到現在爲止，我只用一個回調的工作我希望是這樣的：

initMap(setPath) 

爲工作的setpath不具有（）連接時，它的定義是作爲參數傳遞的，因此不會立即執行，雖然向setPath添加一組括號，因爲它也需要一個回調（addPath），意味着它立即得到執行嗎？）

Answer 1

有與所提供的例子幾個問題：

1）當裝載谷歌地圖API，callback參數接受 回調函數名稱函數本身應具有 以下簽名：

function initMap() { 
    //... 
} 

其中

<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap" async defer></script> 

只有無參數的回調函數可以通過這種方式來指定。

2）由於jQuery.getJSON()是async默認和你逝去的回調函數，setPath功能的實現應該是這樣的：

function setPath(callback) { 
    $.getJSON('./expOneActivityData.json', 
     function (data) { 
      callback(data); 
     } 
    ); 
}; 

工作實例

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
     center: { lat: 34.397, lng: 150.644 }, 
 
     scrollwheel: false, 
 
     zoom: 2 
 
    }); 
 

 
    setPath(function(data) { 
 
     addPath(map,data); 
 
    }); 
 
} 
 

 
function setPath(callback) { 
 
    $.getJSON('https://gist.githubusercontent.com/vgrem/91ba4d694157169b112c/raw/5bdd81c6f5bdfa5ba2d0ca8d5494129b329399d8/expOneActivityData.json', 
 
     function (data) { 
 
      callback(data); 
 
     } 
 
    ); 
 
}; 
 

 

 
function addPath(map,expeditionCoordinates) { 
 
    var trekLine = new google.maps.Polyline({ 
 
     path: expeditionCoordinates, 
 
     geodisc: true, 
 
     stokeColor: '#FF0000', 
 
     strokeOpacity: 1.0, 
 
     strokeWeight: 2 
 
    }); 
 
    trekLine.setMap(map); 
 
}

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#map-canvas { 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div id="map-canvas"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" 
 
      async defer></script>

Answer 2

你可以'在谷歌地圖JavaScript API V3腳本的callback參數t傳遞參數包括。

這是行不通的：

<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap(setPath(addPath))"></script> 

，你發現了。像這樣的東西應該：

function initMap() { 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     center: {lat: 34.397, lng: 150.644}, 
     scrollwheel: false, 
     zoom: 2 
    }); 
    setPath(addPath)); 
} 

function setPath(callback) { 
    $.getJSON('./expOneActivityData.json', 
    function(data) { 
     // Some looping contstruct to navigate through my JSON file. 
     // create the expeditionCoordinates array 
     callback(expeditionCoordinates); 
    } 
); 
}; 

function addPath(expeditionCoordinates) { 
    var trekLine = new google.maps.Polyline({ 
    path: expeditionCoordinates, 
    geodisc: true, 
    stokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

    trekLine.setMap(map); 
} 

使用這種異步加載API：

<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap" async defer></script>