Question

我正在试图通过google方向api来显示带有路线的地图和基于文本的分步指示。

但这不起作用，我只得到地图te线而不是地图和文字方向。到目前为止，我的代码是一个可以自动绘制地图的工作地图。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Uw route.</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) {
        // Center initialized to Utrecht Nederland
        var myOptions = {
          zoom: 10,
          center: new google.maps.LatLng(52.09073739999999, 5.121420100000023),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Draw the map
        var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);

        var directionsService = new google.maps.DirectionsService();
        var directionsRequest = {
          origin: from,
          destination: to,
          travelMode: google.maps.DirectionsTravelMode.DRIVING,
          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
              });
            }
            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, #to-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: 1200px;
        height: 1200px;
        margin-top: 10px;
      }
    </style>
  </head>
  <html>
    <body> 
<form method="POST"  name="calculate-route" id="calculate-route" >
    <h1>Hier vind u de route </h1>
    <script>
function GET() {
  var data = [];
  for (var i = 0; i < arguments.length; i++) {
    data.push(getQueryMap()[arguments[i]]);
  }
  return data;
}
var queryMap = null;
function getQueryMap() {
  if (queryMap) { return queryMap; }
  queryMap = {};
  var querySplit = location.search.substring(1).split('?');
  for (var i = 0; i < querySplit.length; i++) {
    var thisQuery = querySplit[i].split('=', 2);
    queryMap[thisQuery[0]] = thisQuery[1];
  }
  return queryMap;

}
    </script>
    <input type="hidden" id="from" value=""  />
    <script type="text/javascript">
  document.getElementById('from').value = GET('from')[0];  
</script>
  <br />
      <input type="hidden" id="to" name="to" readonly="readonly"  value="Belgieplein1,Brussel" size="30" />
      <br />
    </form>
        <script>
$(document).ready(function(){
     $("#calculate-route").submit();
});
</script>
    <div id="map"></div>
    <p id="error"></p>
  </body>
</html>

有人可以指出我在错误地插入google api html代码，这样我就可以将其用于内部学习项目，以了解google方向和地图api如何工作以及如何实现它们我们想要什么和需要什么。

我希望对api有一种感觉，并且知道它是如何工作的。

所以我可以给非技术人员和基本的指导，说明它能做什么，不能做什么以及什么是api是什么以及api是什么。

google方向并相互映射

0 个答案: