谷歌地图动态标记和折线答案

【问题标题】：Google Map dynamics markers and polylines谷歌地图动态标记和折线
【发布时间】：2015-08-05 15:46:33
【问题描述】：

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

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

第二个问题是我在创建的折线上做一个简单的符号动画，但流向不时改变，如果我想做伦敦到纽约，符号应该从伦敦滑到纽约而不是相反（为了代码简单，我删除了这部分）。请注意，我使用 Gmaps 包装器来使用 Google 地图功能。

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

【问题讨论】：

请提供一个Minimal, Complete, Tested and Readable example 来证明该问题。
Google Maps Javascript API 中没有 map.addMarker 方法。
为什么要投反对票？代码已完成，除此之外没有什么可展示的了！ addmarker 是我的功能，如果你没有得到代码就不要参与这个话题。
如果addMarker 是您的函数但它不存在，您的代码如何才能完整？请仅使用显示您的问题的发布代码创建一个工作示例。
addMarker 是在我的代码中可见的 addMarkerCity(cityPosition) 内部调用的函数。 addMarker 是 Gmaps JS 库中的一个函数。

标签： javascript jquery google-maps google-maps-markers google-polyline

【解决方案1】：

您是先创建折线，然后再创建标记，因此折线不会出现

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

一个例子JSFiddle

【讨论】：

没有改变任何东西，折线上的符号动画仍然表现得很奇怪。