0

我是 ruby​​ on rails 和 javascript 的新手。我想在我的项目中使用谷歌地图方向服务。它在 html 中运行良好，但是当我将它放在我的 rails 项目中时，它停止工作并抛出错误

ReferenceError：谷歌未定义

var DirectionsService = 新的 google.maps.DirectionsService();

我发布我的代码也请在下面查看。

function initGeolocation()
{
       if(navigator.geolocation)
        {
          navigator.geolocation.getCurrentPosition( success, fail );
        }
    else
        {
          alert("Sorry, your browser does not support geolocation services.");
        }
}

var geocoder;
var directionDisplay;
var map;   
var marker;
 alert("bahar");
var directionsService = new google.maps.DirectionsService();
alert("bahar666");




function success(position) {
  geocoder = new google.maps.Geocoder();
  directionsDisplay = new google.maps.DirectionsRenderer();
  coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom:12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: coords
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  marker=new google.maps.Marker();
  marker.setPosition(coords);
  marker.setMap(map);
  directionsDisplay.setMap(map);

}

function calcRoute(startloc,endloc) {

  var start = new google.maps.LatLng(startloc[0],startloc[1]);
  var end =new google.maps.LatLng(endloc[0],endloc[1]);
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode.DRIVING
  };
 alert("satatus"+directionsService);
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
    else
     {
       alert("error in status"+status);
     }
  });
}

   function getlonglat(address){
 var loc3=[];
 geocoder.geocode( { 'address': address}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {
    loc3[0]=results[0].geometry.location.lat();
    loc3[1]=results[0].geometry.location.lng();

  } 
  else {
    alert("Geocode was not successful for the following reason: " + status);
       }
});
 return loc3;

}


   function codeAddress() {

var address1 = document.getElementById("routeStart").value;
var address2 = document.getElementById("routeEnd").value;

var loc1=getlonglat(address1);    
var loc2=getlonglat(address2);



    setTimeout(function() {calcRoute(loc1,loc2);},800);


  }


    function fail()
    {
         var err=document.getElementById("error_view");
          err.innerHTML="An unknown error occurred."
    }




    <!DOCTYPE HTML>
  <html>
  <head>
  <title>Basic GeoLocation Map</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script type="text/javascript" src="http://maps.google.com/maps/api       /js?libraries=places&sensor=false"></script>
 <script src="map.js" type="text/javascript"></script>

 </head>
 <body onload="initGeolocation();">
 <p id="error_view"></p>
 <div id="map_canvas" style="width: 600px; height: 400px; border-right: 1px solid     #666666;    border-bottom: 1px solid #666666; border-top: 1px solid #AAAAAA; border-left:     1px solid #AAAAAA;"></div>
 <br><br>
 <form action="#" onSubmit="codeAddress();return false;" id="routeForm">
   <label>
      From: <br />
     <input type="text" id="routeStart" >

    </label>
      <label><br />
  To: <br />
  <input type="text" id="routeEnd"  >
   </label>
     <script>

            var autocomplete1 = new google.maps.places.Autocomplete($("#routeStart")[0], {});
            var autocomplete2 = new google.maps.places.Autocomplete($("#routeEnd")[0], {});

          google.maps.event.addListener(autocomplete1, 'place_changed', function() {
            var place = autocomplete1.getPlace();
            console.log(place.address_components);
        });


        google.maps.event.addListener(autocomplete2, 'place_changed', function() {
            var place = autocomplete2.getPlace();
            console.log(place.address_components);
        });
       </script>

   <input type="submit" value="Calculate route">
  </form>

  </body>
  </html>
4

1 回答 1

0

通过将 html 和 javascript 放在同一页面上解决

于 2013-02-28T11:17:56.457 回答