6

ブラウザが地理位置情報をサポートしているかどうかを確認し、ユーザーの地理位置情報を取得してマップの中央に配置する次の関数があります。

ユーザーの地理的位置から固定された場所 (これは変更されません) への方向をユーザーに提供できるようにするには、何を追加する必要がありますか?

if (navigator.geolocation)
{
  navigator.geolocation.getCurrentPosition(function(position)
  {                                                              
    var latitude = position.coords.latitude;                    
    var longitude = position.coords.longitude;                 
    var coords = new google.maps.LatLng(latitude, longitude);
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var mapOptions = 
    {
      zoom: 15,  
      center: coords, 
      mapTypeControl: true, 
      navigationControlOptions:
      {
        style: google.maps.NavigationControlStyle.SMALL
      },
       mapTypeId: google.maps.MapTypeId.ROADMAP
    };
     map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
     var marker = new google.maps.Marker( 
       {
         position: coords, 
         map: map,                 
        });
   });
}
else
{
   alert("Geolocation API is not supported in your browser.");

この関数をコードに追加しました:

  function calcRoute() {
    var start = position;
    var end = "London";
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
      }
    });
  }

HTML: <div id="mapContainer" onload="calcRoute()"></div>

しかし、まだ機能していないようです。

4

2 に答える 2

12

次のコードで動作するようになりました：

if (navigator.geolocation) { //Checks if browser supports geolocation
   navigator.geolocation.getCurrentPosition(function (position) {                                                              //This gets the
     var latitude = position.coords.latitude;                    //users current
     var longitude = position.coords.longitude;                 //location
     var coords = new google.maps.LatLng(latitude, longitude); //Creates variable for map coordinates
     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();
     var mapOptions = //Sets map options
     {
       zoom: 15,  //Sets zoom level (0-21)
       center: coords, //zoom in on users location
       mapTypeControl: true, //allows you to select map type eg. map or satellite
       navigationControlOptions:
       {
         style: google.maps.NavigationControlStyle.SMALL //sets map controls size eg. zoom
       },
       mapTypeId: google.maps.MapTypeId.ROADMAP //sets type of map Options:ROADMAP, SATELLITE, HYBRID, TERRIAN
     };
     map = new google.maps.Map( /*creates Map variable*/ document.getElementById("map"), mapOptions /*Creates a new map using the passed optional parameters in the mapOptions parameter.*/);
     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('panel'));
     var request = {
       origin: coords,
       destination: 'BT42 1FL',
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

     directionsService.route(request, function (response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     });
   });
 }
于 2013-02-02T15:54:45.547 に答える
0

を取得したら、positionDirectionsサービスを使用して地図上に方向をレンダリングします。

サンプルコードはここにあります-https ：//developers.google.com/maps/documentation/javascript/directions#DisplayingResults

于 2013-01-29T17:50:20.517 に答える