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);

Google Maps API V3和航空公司路线图

1 个答案: