Javascript Google地图动态标记和多段线

用户在2个文本输入中插入出发城市和目的地，然后单击按钮在Google地图上显示与插入城市对应的2个标记以及这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,
  });

我对这段代码有两个问题：第一个问题是，当用户单击一次按钮时，标记在Google地图上显示良好，但不是两个标记之间的多段线。我必须在按钮上单击两次以使多段线可见。要创建多段线，我将使用包含每个标记位置的全局数组pathArray。它总是在第一次单击时显示空数组，然后在第二次单击按钮后显示标记的正确位置

第二个问题是，我正在创建的多段线上制作一个简单的符号动画，但流向会不断变化，如果我想从伦敦到纽约，符号应该从伦敦滑到纽约，而不是从纽约滑到伦敦（为了代码简单，我删除了这一部分）。请注意，我使用Gmaps包装器来使用谷歌地图功能

---

如果您知道我的代码有什么问题，请感谢您的帮助。

您先创建多段线，然后创建标记，这样多段线就不会出现

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

---

一个例子

没有改变任何东西，多段线上的符号动画仍然表现出奇怪的行为。请提供一个例子来说明这个问题。Google Maps Javascript API中没有

map.addMarker

方法。为什么要投否决票？该代码是完整的，没有什么比这更显示！addmarker是我的函数，如果你没有得到代码，就不要参与这个主题。如果

addmarker

是你的函数，而它不在那里，你的代码怎么可能是完整的？请仅使用显示您的问题的发布代码创建一个工作示例。addMarker是在我的代码中可见的addMarkerCity（cityPosition）内调用的函数。addMarker是GMAPSJS库中的一个函数。