Question

我对网络地图相当陌生，在向Google Maps API v3添加WMS图层时遇到问题。我想弄清楚如何将城市（多伦多）的行车路线添加到该地区的各个省级公园，并希望当用户点击省级公园时，屏幕上会显示来自多伦多的路线。我已经将所有省级公园编码，只是无法弄清楚如何添加行车路线。谢谢！这是我到目前为止的代码：

<!DOCTYPE html>
<html>
<head> 
  <!--Map title, style elements and map ID--> 
  <title>Provincial Parks Near Toronto</title>
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
      <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
</head>
<body>
  <div id="map"></div>
<script type="text/javascript">
    // This map displays markers over provincial parks in Ontario.
    // When the user clicks the marker, an info window displaying the park name opens.
    var locations = [
      ['Bon Echo Provincial Park', 44.8998628,-77.1976591, 11],
      ['Sibbald Point Provincial Park', 44.3219602,-79.3276202, 10],
      ['Killarny Provincial Park', 46.0130509,-81.4039385, 9],
      ['Pinery Provincial Park', 43.2480553,-81.8239777, 8],
      ['Sandbanks Provincial Park', 43.9073306,-77.2418054, 7],
      ['Killbear Provincial Park', 45.3540961,-80.1943534, 6],
      ['Algonquin Provincial Park', 45.5539737,-78.5989487, 5],
      ['Bronte Creek Provincial Park', 43.4086468,-79.7702277, 4],
      ['Earl Rowe Provincial Park', 44.1549163,-79.9075955, 3],
      ['Craigleith Provincial Park', 44.536675,-80.3505894, 2],
      ['Springwater Provincial Park', 44.4446111,-79.7504844, 1]
    ];

    // The map is centred on the centre of Toronto, and is zoomed so that all five breweries fit within the zoom window, yet fill the screen.
    var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 7,
      center: new google.maps.LatLng(43.657999, -79.379139),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Display multiple markers on the map.
    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    // Go through the various markers and place each on the map.
    for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      // Each marker has a display window.
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

使用Google Maps API推动多个目的地的路线

0 个答案: