2

我需要将两个地址传递给以下代码，以根据选择的运输方式显示它们之间的方向。一旦用户从第 1 页的下拉框中选择了两个城市，我会将它们发送到代码（第 2 页）以显示它们的位置和它们之间的方向。

我已经从 Google 复制了这个示例代码。我现在正在尝试将它与我的代码结合起来，但不知道如何。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Travel modes in directions</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <style type="text/css">
    html, body {
      height: 50%;
      margin: 0;
      padding: 0;
    }

    #map-canvas {
      height: 200%;
      width:25%;
    }

    @media print {
      html, body {
        height: auto;
      }

      #map-canvas {
        height: 650px;
      }
    }
    </style>
    <script>
 function GetLocation(add) {
            var geocoder = new google.maps.Geocoder();
            var address = add;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    var output = latitude + "," + longitude;
                    return output;
                } else {
                    alert("Request failed.")
                }
            });
        };

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(-37.81411, 144.96327999999999);
var oceanBeach = new google.maps.LatLng(-37.814107, 144.96327999999994);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: haight
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="panel">
    <b>Mode of Travel: </b>
    <select id="mode" onchange="calcRoute();">
      <option value="DRIVING">Driving</option>
      <option value="WALKING">Walking</option>
      <option value="BICYCLING">Bicycling</option>
      <option value="TRANSIT">Transit</option>
    </select>
    <script>GetLocation("Los Angeles, USA");</script>
    <script>GetLocation("Las Vegas, USA");</script>
        </div>
    <div id="map-canvas"></div>
  </body>
</html>
4

2 回答 2

1

You are essentially asking about SearchBox . You don't need it though. You can directly take a form and get the submitted values and Geocode it to be passed in the aforementioned script.

于 2013-08-05T21:56:01.977 回答
0

如果要将两个地址传递到查询字符串中的第二页，可以执行以下操作：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Travel modes in directions</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }

    #map-canvas {
      height: 500px;
      width:600px;
    }
    </style>
    <script>

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var origin = "Los Angeles, USA";
var destination = "Las Vegas, USA";
var maptype = google.maps.MapTypeId.ROADMAP;
var travelMode = google.maps.TravelMode.DRIVING;
var arrivalTime = null;
var departureTime = null;

function initialize() {
  // If there are any parameters at eh end of the URL, they will be in  location.search
  // looking something like  "?marker=3"

  // skip the first character, we are not interested in the "?"
  var query = location.search.substring(1);

  // split the rest at each "&" character to give a list of  "argname=value"  pairs
  var pairs = query.split("&");
  for (var i=0; i<pairs.length; i++) {
    // break each pair at the first "=" to obtain the argname and value
    var pos = pairs[i].indexOf("=");
    var argname = pairs[i].substring(0,pos).toLowerCase();
    var value = pairs[i].substring(pos+1).toLowerCase();

    // process each possible argname  -  use unescape() if theres any chance of spaces
    if (argname == "origin") {origin = unescape(value);}
    if (argname == "dest") {destination = unescape(value);}
    if (argname == "type") {
      if (value == "m") {maptype = google.maps.MapTypeId.ROADMAP;}
      if (value == "k") {maptype = google.maps.MapTypeId.SATELLITE;}
      if (value == "h") {maptype = google.maps.MapTypeId.HYBRID;}
      if (value == "t") {maptype = google.maps.MapTypeId.TERRAIN;}

    }
    if (argname == "mode") {
      if (value == "driving") {travelMode = google.maps.TravelMode.DRIVING; } 
      if (value == "walking") {travelMode = google.maps.TravelMode.WALKING; } 
      if (value == "transit") {travelMode = google.maps.TravelMode.TRANSIT; } 
      if (value == "bicycling") {travelMode = google.maps.TravelMode.BICYCLING; } 
    }
    if (argname == "arrive") {
      arrivalTime = new Date(value);
    }
    if (argname == "depart") {
      departureTime = new Date(value);
    }
  }

  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('panel'));
  calcRoute(origin, destination, travelMode, departureTime, arrivalTime);
}


function calcRoute(origin, destination, mode, departureTime, arrivalTime) {
  var request = {
      origin: origin,
      destination: destination,
      travelMode: mode,
  };
  if (travelMode == google.maps.TravelMode.TRANSIT)
    request.transitOptions = {};
  if (travelMode == google.maps.TravelMode.TRANSIT && !!departureTime)
    request.transitOptions.departureTime = departureTime;
  if (travelMode == google.maps.TravelMode.TRANSIT && !!arrivalTime)
    request.transitOptions.departureTime = departureTime;

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else alert("Directions Request failed: "+status);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div id="panel"></div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
_uacct = "UA-162157-1";
urchinTracker();
</script> 
  </body>
</html>

工作示例

和带有表单输入的工作示例

于 2013-08-05T22:47:38.923 回答