谷歌地圖動態標記和多義線

用戶在2個文本輸入框中插入出發地和目的地城市，然後單擊按鈕以顯示與插入城市對應的Google地圖2標記以及這兩個點之間的折線。谷歌地圖動態標記和多義線

這裏是我的代碼：

//Global array 
var pathArray = []; 
var cities = [ origin, destination ]; 
$('#button').on("click", function() { 
    reverseGeocodeCities(cities); 
}); 

    function reverseGeocodeCities(cities) { 
    $.each(cities, function(index, value) { 
    geocoder.geocode({'address': value}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     addMarkerCity(results[0].geometry.location); 
    } 
    }); 
    }); 
    //Create the polyline just after the loop. 
    addPolyline(); 
} 

    function addMarkerCity(cityPosition) { 
    var currentMarker = map.addMarker({ 
     position: cityPosition 
    }); 
    //Add the position of the marker into the global pathArray used by addPolylineCity function. 
    pathArray.push(currentMarker.getPosition()); 
} 

    function addPolylineCity() { 
    console.log(pathArray); //Display "[]" at the first click. 
    var polyline = map.drawPolyline({ 
    path: pathArray, 
    });

我有2個問題與此代碼：第一種是，當用戶點擊該按鈕後，在谷歌地圖上，但不顯示的良好標記2個標記之間的折線。我必須在按鈕上單擊兩次以使多段線可見。爲了創建多段線，我使用了包含每個標記位置的全局數組pathArray。它總是在第一次點擊時顯示一個空數組，然後在第二次點擊按鈕之後顯示標記的正確位置。

第二個問題是，我在創建的多段線上做了一個簡單的符號動畫，但流動方向隨時間變化，如果我想要倫敦到紐約，符號應該從倫敦滑到紐約，而不是相反（爲簡化代碼，我刪除了這部分內容）。請注意，我使用Gmaps包裝來使用Google地圖功能。

感謝您的幫助，如果您知道我在做錯我的代碼。

來源

2015-05-23 Nizar B.

請提供[最小的，完整的，經過測試和讀示例]（HTTP： //stackoverflow.com/help/mcve）來證明這個問題。 – geocodezip

Google Maps JavaScript API中沒有'map.addMarker'方法。 – geocodezip

爲什麼downvote？代碼是完整的，除此之外沒有別的東西可以顯示！ addmarker是我的功能，如果你沒有得到代碼只是不參與這個話題。 –

你是第一個創建的折線，然後標記，所以折線不會出現

   if (pathArray.length == 2) { 
       addPolylineCity(); 
      }; //hardcode

一個例子JSFiddle

來源

2015-05-23 21:37:38 Alimentador

不改變任何東西，折線上的符號動畫仍然表現怪異。 –

谷歌地圖動態標記和多義線

回答

相關問題