結合地理編碼和Google路線

Question

我是一位PHP開發人員，幾乎沒有JavaScript知識，但是我正在嘗試將地理編碼和Google指導JavaScript代碼結合起來。 由於服務器端的限制，無法使用PHP進行地理編碼。 這是我到目前為止的內容：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">


$(document).ready(function(){
  initialize(); 
});


var geocoder = new google.maps.Geocoder();
var address = "hoefslag 41, 's gravenmoer";

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 directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  function initialize() {
    var latlng = new google.maps.LatLng(51.764696,5.526042);
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"My location"
    }); 
  }





  function calcRoute() {
    var start = document.getElementById("routeStart").value;
    var end = "51.764696,5.526042";
    var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }




</script>


----- HTML for the map:

<div id="map_canvas" style="width:710px; height:300px"></div>   
    <form action="" onsubmit="calcRoute();return false;" id="routeForm">
        <input type="text" id="routeStart" value="">
        <input type="submit" value="Route plannen">
    </form>
<div id="directionsPanel"></div>

緯度和經度是根據我輸入的地址正確計算得出的（通過顯示兩個變量進行檢查。但是，無論我如何嘗試，我似乎都無法將這兩個變量合並到地理編碼代碼下的兩個函數中，而不會分解“計算路線”功能。有什么想法嗎？

Answer 1

只是嘗試與此。

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Google Map Address</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">


    $(document).ready(function(){
     // initialize(); 
    });


    var geocoder = new google.maps.Geocoder();
    var address = "hoefslag 41, 's gravenmoer";

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

        alert("lat.."+latitude+"..&.."+longitude);
        initialize(latitude,longitude);
        $("#latlong").val(latitude+","+longitude);
                } 

        }); 




      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      function initialize(latitude,longitude) {
        var latlng = new google.maps.LatLng(latitude,longitude);
        directionsDisplay = new google.maps.DirectionsRenderer();
        var myOptions = {
          zoom: 14,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("directionsPanel"));
        var marker = new google.maps.Marker({
          position: latlng, 
          map: map, 
          title:"My location"
        }); 
      }





      function calcRoute() {

        var start = document.getElementById("routeStart").value;
        var end = $("#latlong").val();

        var request = {
          origin:start,
          destination:end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
        alert("Start.."+start+"..End.."+end);
      }




</script>

    </head>
    <body>

    <h2>Google Map Address</h2>

    <div id="map_canvas" style="width:710px; height:300px"></div>   
    <!--<form action="" onsubmit="calcRoute();return false;" id="routeForm">-->
    <form action="" id="routeForm">
        <input type="text" id="routeStart" value="">
        <input type="button" value="Route plannen" onClick="calcRoute();">
        <input type="hidden" name="latlong" id="latlong"/>
    </form>
   <div id="directionsPanel"></div>

    </body>
    </html>

結合地理編碼和Google路線

問題描述

1 個解決方案

解決方案1
1 已采納 2014-01-22 10:41:41

結合地理編碼和Google路線

問題描述

1 個解決方案

解決方案1 1 已采納 2014-01-22 10:41:41

解決方案1
1 已采納 2014-01-22 10:41:41