-2

衛星ナビの地理位置情報タイプのマッピングを Web サイトに埋め込む方法はありますか?

このような

Google マップ アプリにこの機能があることは承知していますが、これを Web サイトに実装する必要があります。

ありがとう

4

1 に答える 1

-1

アプリだけでなく、Google マップにもこの機能があります。JavaScript API
を使用できます。API で例とドキュメントを見つけることができます。道順については、道順サービス を使用する必要があります

Google Maps JavaScript API でルート案内を使用するには、ルート案内サービスへのリクエストを開始する タイプDirectionsServiceと呼び出しのオブジェクトを作成し、入力用語を含むオブジェクト リテラルと、レスポンスの受信時に実行するコールバック メソッドを渡します。DirectionsService.route()DirectionsRequest

DirectionsRequestオブジェクト リテラルには次のフィールドが含まれます。

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

DirectionsServiceメソッドで へのルート リクエストを開始するroute()には、サービス リクエストの完了時に実行されるコールバックを渡す必要があります。このコールバックは、応答で DirectionsResultとコードを返します 。DirectionsStatus

次の例では、ルート リクエストを作成し、レスポンスをdirectionsPaneldivに表示します。

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

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

HTML 本文:

<div id="map" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
于 2016-06-27T10:19:43.303 に答える