Question

我有一张表单可通过Google地图获取路线。它正确地获取位置并在地图上绘制路线，但我无法将路线/路线列表显示在地图下方。

我想知道是否有人可以告诉我下面的代码我在哪里出错，以便在＆＃34;方向＆＃34; DIV？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Find a route using Geolocation and Google Maps API</title>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
      function calculateRoute(from, to) {
        var entry_latitude = map.getAttribute("data-latitude");
        var entry_longitude = map.getAttribute("data-longitude");

        var myOptions = {
          disableDefaultUI: true,
          zoom: 17,
          center: new google.maps.LatLng(entry_latitude, entry_longitude),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Draw the map
        var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);

        // Get the entry address
        var to = map.getAttribute("data-address");

        // Choose the mode
        var transit_mode = $("input[name='radio_travel_type']:radio:checked").val();

        //alert(transit_mode);

        console.log(transit_mode);

        var directionsService = new google.maps.DirectionsService();

        if(transit_mode == "DRIVING"){ travelMode = google.maps.DirectionsTravelMode.DRIVING; }
        if(transit_mode == "BICYCLING"){ travelMode = google.maps.DirectionsTravelMode.BICYCLING; }
        if(transit_mode == "TRANSIT"){ travelMode = google.maps.DirectionsTravelMode.TRANSIT; }
        if(transit_mode == "WALKING"){ travelMode = google.maps.DirectionsTravelMode.WALKING; }

        var directionsRequest = {
          origin: from,
          destination: to,
          travelMode: travelMode,
          unitSystem: google.maps.UnitSystem.METRIC
        };
        directionsService.route(
          directionsRequest,
          function(response, status)
          {
            if (status == google.maps.DirectionsStatus.OK)
            {
              new google.maps.DirectionsRenderer({
                map: mapObject,
                directions: response
              });
              console.log(response);
            }
            else
              $("#error").append("Unable to retrieve your route<br />");
          }
        );
      }

      $(document).ready(function() {
        // If the browser supports the Geolocation API
        if (typeof navigator.geolocation == "undefined") {
          $("#error").text("Your browser doesn't support the Geolocation API");
          return;
        }

        $("#from-link").click(function(event) {
          event.preventDefault();
          var addressId = this.id.substring(0, this.id.indexOf("-"));

          navigator.geolocation.getCurrentPosition(function(position) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
              "location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
            },
            function(results, status) {
              if (status == google.maps.GeocoderStatus.OK)
                $("#" + addressId).val(results[0].formatted_address);
              else
                $("#error").append("Unable to retrieve your address<br />");
            });
          },
          function(positionError){
            $("#error").append("Error: " + positionError.message + "<br />");
          },
          {
            enableHighAccuracy: true,
            timeout: 10 * 1000 // 10 seconds
          });
        });

        $("#calculate-route").submit(function(event) {
          event.preventDefault();
          calculateRoute($("#from").val(), $("#to").val());
        });
      });
    </script>
    <style type="text/css">
      #map {
        width: 500px;
        height: 400px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Calculate your route</h1>
    <div id="map" data-address="Lincoln, UK" data-zoom="17" data-latitude="53.2333" data-longitude="-0.5333"></div>
    <div id="directions"></div>
    <form id="calculate-route" name="calculate-route" action="#" method="get">
      <label for="from">From:</label>
      <input type="text" id="from" name="from" required="required" placeholder="An address" size="30" />
      <a id="from-link" href="#">Get my position</a>
      <br />

        <ul>
            <li><input type="radio" name="radio_travel_type" id="radio_driving" value="DRIVING" checked="checked" />&nbsp;<label for="radio_driving">By car</label></li>
            <li><input type="radio" name="radio_travel_type" id="radio_bicycling" value="BICYCLING" />&nbsp;<label for="radio_bicycling">Cycling</label></li>
            <li><input type="radio" name="radio_travel_type" id="radio_transit" value="TRANSIT" />&nbsp;<label for="radio_transit">By public transport</label></li>
            <li><input type="radio" name="radio_travel_type" id="radio_walking" value="WALKING" />&nbsp;<label for="radio_walking">Walking</label></li>
        </ul>
      <br />
      <input type="submit" />
      <input type="reset" />
    </form>

    <p id="error"></p>
  </body>
</html>

Answer 1

在DirectionsRenderer上调用setPanel或在DirectionsRendererOptions

中设置面板选项

new google.maps.DirectionsRenderer({
  map: mapObject,
  panel: document.getElementById('directions'),
  directions: response
});

使用Google Maps API v3显示路线列表

1 个答案: