在谷歌地圖中畫線

Question

我試圖在谷歌地圖上畫一條線，我試試這個代碼，沒有發生任何事情，只有標記沒有線，我已經讀了一些參考像https://developers.google.com/maps/documentation/javascript/v2/overlays#Icons_overview 並嘗試代碼，但行仍然不出來，任何人都可以幫助我？下面 是我的代碼，假設地址是陣列

for (var i = 0; i < address.length; i++) { 
    geocoder.geocode({ 'address': address[i] }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 

      if (i == 2) { 
       var pos1 = results[0].geometry.location; 
       alert(pos1); 
      } 

      else if (i == 2) { 
       var pos2 = results[0].geometry.location; 
       alert(pos2); 
      } 

      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker 
      (
       { 
        position: results[0].geometry.location, 
        map: map, 
        title: 'click me' 
       } 
      ); 
      var infowindow = new google.maps.InfoWindow 
      (
       { 
        content: '<img src="http://wallpaperscraft.com/image/child_girl_emotion_sweet_face_25641_100x100.jpg"> Welcome to origineit' 
       } 
      ); 
      var flightPlanCoordinates = [ 
       new google.maps.LatLng(pos1), 
       new google.maps.LatLng(pos2) 
       ]; 

      if (i == 2) { 

       var polyline = new google.maps.Polyline 
       ({ 
        path: flightPlanCoordinates, 
        strokeColor: '#FF0000', 
        strokeOpacity: 0.8, 
        strokeWeight: 3 
       }); 
       polyline.setMap(map); 
      } 

      google.maps.event.addListener(marker, 'click', function() { 
       // Calling the open method of the infoWindow 
       infowindow.open(map, marker); 
      }); 
     } 
     else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
} 

Answer 1

這裏的問題是，你正在使用谷歌地圖V3（你應該）以外，其是從V2折線一切。你應該改爲API documentation for Google Maps V3。

對於谷歌地圖V3，它應該是這個樣子：

編輯

當測試出你的代碼（而不是僅僅寫從我頭頂的答案）我還注意到，你有一些作用域問題（你沒有解決你的更新代碼中檢查if(i == 2)的問題，我建議this article爲你瞭解更多關於這個問題），所以我改變了這一點。下面的代碼經過測試可以正常工作（http://jsfiddle.net/YMyc9/），但它確實應該重構一下，以便更易於理解。

var pos1 = null; // These need to be declared outside of the geocode-callback 
var pos2 = null; // so we also remove 'var' from the assignment inside of that function 
for (var i = 0; i < address.length; i++) { 
    geocoder.geocode({'address': address[i]}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 

      // We can't use 'i' here since this happens in a callback and the loop will already 
      // have progressed and 'i' is (with my two test addresses) always 2 here. 
      if (pos1 == null) { 
       pos1 = results[0].geometry.location; 
      } 
      else if (pos2 == null) { 
       pos2 = results[0].geometry.location; 
      } 
      else { 
       /* We already got two so maybe quit? */ 
       return; 
      } 

      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       position: results[0].geometry.location, 
       map: map, 
       title: 'click me' 
      }); 
      var infowindow = new google.maps.InfoWindow({ 
       content: '<img src="http://wallpaperscraft.com/image/child_girl_emotion_sweet_face_25641_100x100.jpg"> Welcome to origineit' 
      }); 

      /* NEW CODE HERE */ 
      if (pos2 != null) { 
       var polyline = new google.maps.Polygon({ 
        paths: [pos1, pos2], 
        strokeColor: '#FF0000', 
        strokeOpacity: 0.8, 
        strokeWeight: 3, 
        fillColor: '#FF0000', 
        fillOpacity: 0.35 
       }); 

       polyline.setMap(map); 
      } /* BACK TO THE OLD CODE HERE */ 

      google.maps.event.addListener(marker, 'click', function() { 
       // Calling the open method of the infoWindow 
       infowindow.open(map, marker); 
      }); 
     } 
     else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
}