Google Maps API v3：在地圖上循環並添加多義線

Question

我已經通過論壇嘗試搜索解決方案，並且已經修改了我遇到的幾個問題的代碼，但是這一個不能解決我的問題。我試圖在地圖上繪製多個點（其工作原理），然後在點之間畫線。每個標記都包含諸如緯度和經度等信息以及它的鄰居（我想繪製線的點）。我也給它我想要的顏色，因爲不同的'路線'可以有不同的顏色。唯一我能看到的是一個問題，就是我畫了一條線，將其設置在地圖上，然後再次爲下一個標記運行循環。

我的代碼放置標記，爲每個標記放置信息窗口，但不在標記之間繪製線條。任何人都可以看到我搞砸了哪些地方，或者即使這樣做有可能以我的方式做到這一點？

的原因，我保持drawMap功能分開是用戶希望過濾掉可見數據的情況下，我需要動態地重新繪製地圖。因此，我將全局標記列表保留下來，以便即使在函數完成後也可以引用它。

我的代碼：

http://www.nku.edu/~sweikatam1/nkuPhysicalMapTest.html

在特定的點與問題是功能drawMap，其被傳遞的對象，markerList的陣列，包含緯度，經度，顏色（折線）和其他數據位。 該線位置：

 for(var j = 0; j < markerList.length; j++){ 
      if(markerList[j].name == markerList[i].neighbor){ 
       var targetDestination = new google.maps.LatLng(markerList[j].latitude,markerList[j].longitude); 
       //alert(markerList[i].latitude + " " + markerList[i].longitude + " \r" + markerList[j].latitude + " " + markerList[j].longitude); 
      } 
     } 
     //set the pathway for the two points 
     var flightPlanCoordinates = [ 
      new google.maps.LatLng(markerList[i].latitude, markerList[i].longitude), 
      new google.maps.LatLng(targetDestination) 
      ]; 

      //alert("Color: " + markerList[i].routeColor); 
     //set the line and color  
     var flightPath = new google.maps.Polyline({ 
      path:flightPlanCoordinates, 
      strokeColor:markerList[i].routeColor, 
      strokeOpacity:2, 
      strokeWeight:5 
      }); 
     //apply lines 
     flightPath.setMap(map); 

作爲一個整體的功能：

function drawMap(markerList){ 
    //alert("Starting drawMap"); 


    //create the map 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: new google.maps.LatLng(39.032253, -84.465015), 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }); 


    var marker; 
    for (var i = 0; i <markerList.length; i++){ 
     /*alert("markerList @ i: " + markerList[i].name); 
     alert("Marker Data: " + "Name: " + markerList[i].name + "\r " 
          + "Latitude: " + markerList[i].latitude + "\r " 
          + "Longitude: " + markerList[i].longitude + "\r " 
          + "Content Type: " + markerList[i].contentType + "\r " 
          + "Image: " + markerList[i].image 
          + "Color: " + markerList[i].routeColor);*/ 
     var contentData = '<b>'+markerList[i].name +'</b>: ' 
          + markerList[i].latitude + ' x ' 
          + markerList[i].longitude + '<br/><p>' 
          + markerList[i].contentType 
          +'</p><img src="' + markerList[i].image + " height=150 width=100>"; 

     //create the marker 

     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(markerList[i].latitude,markerList[i].longitude), 
      draggable: false, 
      icon: markerList[i].icon, 
      map:map, 
      content: contentData, 
      title:markerList[i].name 
     }); 

     //find the neighbor for the current marker and set the destination coordinates 
     for(var j = 0; j < markerList.length; j++){ 
      if(markerList[j].name == markerList[i].neighbor){ 
       var targetDestination = new google.maps.LatLng(markerList[j].latitude,markerList[j].longitude); 
       //alert(markerList[i].latitude + " " + markerList[i].longitude + " \r" + markerList[j].latitude + " " + markerList[j].longitude); 
      } 
     } 
     //set the pathway for the two points 
     var flightPlanCoordinates = [ 
      new google.maps.LatLng(markerList[i].latitude, markerList[i].longitude), 
      new google.maps.LatLng(targetDestination) 
      ]; 

      //alert("Color: " + markerList[i].routeColor); 
     //set the line and color  
     var flightPath = new google.maps.Polyline({ 
      path:flightPlanCoordinates, 
      strokeColor:markerList[i].routeColor, 
      strokeOpacity:2, 
      strokeWeight:5 
      }); 
     //apply lines 
     flightPath.setMap(map); 

     //handle open information windows 
     google.maps.event.addListener(marker,'click', function(){ 
      closeInfos(); 
      var info = new google.maps.InfoWindow({content: this.content}); 
      info.open(map,this); 
      infos[0]=info; 
      }); 
      //alert("Marker " + markerList[i].name + " placed."); 


    } 
    //alert("drawMap complete. Drawing lines"); 

    <!-- DRAWING LINES COMPLETE --> 
} 

如果有什麼事情在這裏似乎很奇怪，困惑，或需要澄清，請讓我知道。總是歡迎批評和改善事情的方法。多謝你們！

Answer 1

在定義，flightPlanCoordinates，第二經緯度正在創建出另一個經緯度（targetDestination）的。因此，只需刪除new google.maps.LatLng部分並直接使用targetDestination即可。隨着這一變化，我看到地圖上畫出了一條藍色的之字形和一條紅色的之字形。

var flightPlanCoordinates = [ 
    new google.maps.LatLng(markerList[i].latitude, markerList[i].longitude), 
    targetDestination 
];