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 个答案: