Google Maps API V3和航空公司路線圖

Question

我試圖創建一個像航空公司所具有的交互式路線圖，而且我正在使用Google Maps API v3。我能夠在地圖上放置標記以用於外圍站和不同標記的中心。我已經廣泛搜索瞭解如何創建線條，用戶點擊集線器並將線條繪製到目的地。如果用戶點擊分站，它也必須劃回一個或多個集線器。任何幫助和/或方向將不勝感激！這是我的代碼只有一些外站和集線器。

<script> 
var outstations = [ 
[37.618972, -122.374889, "SFO" ], 
[37.3626, -121.929022, "SJC" ], 
[23.15185, -109.721044, "SJD" ], 
[9.993861, -84.208806, "SJO" ], 
[17.311194, -62.718667, "SKB" ], 
[17.701889, -64.798556, "STX" ], 
[38.695417, -121.590778, "SMF" ], 
];  

var hubs = [ 
[39.0488367, -84.6678222, "Cincinnati/N. KY Int'l Airport" ], 
[35.8776389, -78.7874722, "Raleigh-Durham Int'l Airport" ], 
[36.0800556, -115.1522500, "Las Vegas/McCarran Int'l Airport" ], 
[18.4393987, -66.0021348, "San Juan Luis Munoz Marin Int'l Airport" ], 
]; 

function initialize() 
{ 
var map = new google.maps.Map(document.getElementById("map_canvas"),{ 
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
mapTypeId: google.maps.MapTypeId.HYBRID 
                    }); 

var bounds = new google.maps.LatLngBounds();       
var infowindow = new google.maps.InfoWindow(); 

for (var a in outstations)   { 
    var b = outstations[a]; 
    var latlng = new google.maps.LatLng(b[0], b[1]); 
    bounds.extend(new google.maps.LatLng(37.579407, -95.624995)); 

    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
icon: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_purple.png', 
     title: b[2] 
             }); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(this.title); 
     infowindow.open(map, this);   
      }); 
            } 
for (var c in hubs)    { 
    var d = hubs[c]; 
    var latlng = new google.maps.LatLng(d[0], d[1]); 

    var marker = new google.maps.Marker({ 
     position: latlng, 
     animation: google.maps.Animation.DROP, 
     map: map, 
icon: 'http://maps.google.com/mapfiles/kml/pal2/icon56.png', 
     title: d[2] 
             }); 
            } 
    map.fitBounds(bounds); 
    var listener = google.maps.event.addListener(map, "idle", function() { 
    if (map.getZoom() > 16) map.setZoom(4); 
    google.maps.event.removeListener(listener); 
}); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Answer 1

它應該是這樣的。 （請回答我下你的帖子的評論的問題，如果腳本沒有做出你需要它）

編輯：現在還連接了幾個分站到其他分站

var hubMarkers = []; 
var outstationMarkers = []; 
var flightLines = []; 
var outstations = [ 
    [37.618972, -122.374889, "SFO" ], 
    [37.3626, -121.929022, "SJC" ], 
    [23.15185, -109.721044, "SJD" ], 
    [9.993861, -84.208806, "SJO" ], 
    [17.311194, -62.718667, "SKB" ], 
    [17.701889, -64.798556, "STX" ], 
    [38.695417, -121.590778, "SMF" ], 
]; 

var hubs = [ 
    [39.0488367, -84.6678222, "Cincinnati/N. KY Int'l Airport" ], 
    [35.8776389, -78.7874722, "Raleigh-Durham Int'l Airport" ], 
    [36.0800556, -115.1522500, "Las Vegas/McCarran Int'l Airport" ], 
    [18.4393987, -66.0021348, "San Juan Luis Munoz Marin Int'l Airport" ], 
]; 

var hubConnections = [ 
    [], // Cincinnati, no connections to outstations 
    [], 
    [0, 1, 2, 6], // Vegas, connected with SFO, SJC, ... 
    [3, 4, 5] 
]; 

var outstationConnections = [ 
    [1, 6], // SFO, connections to outstations SJC & SMF 
    [0],  // SJC, connection to outstation SFO 
    [],  // SJD 
    [],  // SJO 
    [5],  // SKB, connection to outstation STX 
    [4],  // STX, connection to outstation SKB 
    [0],  // SMF, connection to outstation SFO 
]; 

function initialize() { 
    var map = new google.maps.Map(document.getElementById("map_canvas"), { 
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
    }); 
    var bounds = new google.maps.LatLngBounds(); 
    var infowindow = new google.maps.InfoWindow(); 

    for (var a in outstations) { 
    var b = outstations[a]; 
    var latlng = new google.maps.LatLng(b[0], b[1]); 
    bounds.extend(new google.maps.LatLng(37.579407, -95.624995)); 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_purple.png', 
     title: b[2] 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     // clear all previous lines 
     for (var i=0; i<flightLines.length; i++) { 
     flightLines[i].setMap(null); 
     } 
     var index = outstationMarkers.indexOf(this); 
     for (i=0; i<hubConnections.length; i++) { 
     if (hubConnections[i].indexOf(index) > -1) { // if the index of the outstation Marker is found in the connections of that hub 
      var flightPath = new google.maps.Polyline({ 
      path: [new google.maps.LatLng(hubs[i][0], hubs[i][1]), new google.maps.LatLng(outstations[index][0], outstations[index][1])], 
      geodesic: true, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
      }); 
      flightPath.setMap(map); 
      flightLines.push(flightPath); 
     } 
     } 
     // now we add the connections of this outstation to other outstations 
     for (i=0; i<outstationConnections.length; i++) { 
     if (outstationConnections[i].indexOf(index) > -1) { // if the index of the outstation Marker is found in the connections of that hub 
      var flightPath = new google.maps.Polyline({ 
      path: [new google.maps.LatLng(outstations[i][0], outstations[i][1]), new google.maps.LatLng(outstations[index][0], outstations[index][1])], 
      geodesic: true, 
      strokeColor: '#0000FF', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
      }); 
      flightPath.setMap(map); 
      flightLines.push(flightPath); 
     } 
     } 
    }); 
    outstationMarkers.push(marker); 
    } 

    for (var c in hubs) { 
    var d = hubs[c]; 
    var latlng = new google.maps.LatLng(d[0], d[1]); 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     animation: google.maps.Animation.DROP, 
     map: map, 
     icon: 'http://maps.google.com/mapfiles/kml/pal2/icon56.png', 
     title: d[2] 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     // clear all previous lines 
     for (var i=0; i<flightLines.length; i++) { 
     flightLines[i].setMap(null); 
     } 
     var index = hubMarkers.indexOf(this); 
     // line to all the connected outstations 
     for (i=0; i<hubConnections[index].length; i++) { 
     var flightPath = new google.maps.Polyline({ 
      path: [ 
      new google.maps.LatLng(hubs[index][0], hubs[index][1]), 
      new google.maps.LatLng(outstations[ hubConnections[index][i] ][0], outstations[ hubConnections[index][i] ][1]) 
      ], 
      geodesic: true, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 
     flightPath.setMap(map); 
     flightLines.push(flightPath); 
     } 
     // line to all hubs 
     for (i=0; i<hubs.length; i++) { 
     if (i != index) { 
      var flightPath = new google.maps.Polyline({ 
      path: [ 
       new google.maps.LatLng(hubs[index][0], hubs[index][1]), 
       new google.maps.LatLng(hubs[i][0], hubs[i][1]) 
      ], 
      geodesic: true, 
      strokeColor: '#00FF00', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
      }); 
      flightPath.setMap(map); 
      flightLines.push(flightPath); 
     } 
     } 
    }); 
    hubMarkers.push(marker); 
    } 

    map.fitBounds(bounds); 
    var listener = google.maps.event.addListener(map, "idle", function() { 
    if (map.getZoom() > 16) { 
     map.setZoom(4); 
    } 
    google.maps.event.removeListener(listener); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize);