JSとAmapを使用して位置トラフィッククエリ機能を実装する方法-jsチュートリアル-php.cn

JSとAmapを使用して位置トラフィッククエリ機能を実装する方法

王林

リリース： 2023-11-21 18:28:31

オリジナル

1191 人が閲覧しました

JSとAmapを使用して位置トラフィッククエリ機能を実装する方法

JS と Amap を使用して位置交通クエリ機能を実装する方法

都市交通がますます渋滞する中、リアルタイムの交通情報を理解することは旅行にとって非常に重要です。この記事では、JS と Amap API を使用して位置トラフィッククエリ機能を実装する方法と、具体的なコード例を紹介します。

まず最初に、Amap の API ライブラリを導入する必要があります。 HTML ファイルでは、次のコードを使用して API ライブラリを導入できます:

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的API Key"></script>

ログイン後にコピー

ここで、自分の API キーを、Amap オープンプラットフォーム API で取得したものに置き換える必要があります。鍵。 API キーをまだお持ちでない場合は、Amap オープンプラットフォームに開発者アカウントを登録し、アプリケーションを作成して API キーを取得できます。

API ライブラリを導入すると、JS を使用してトラフィッククエリ関数を実装できるようになります。まず、マップオブジェクトを作成し、ページに表示する必要があります。

var map = new AMap.Map('mapContainer', {
  zoom: 12,  // 设置地图缩放级别
  center: [116.397428, 39.90923],  // 设置地图中心点坐标
});

ログイン後にコピー

ここで、mapContainer は、マップを保持するために使用される div 要素の ID です。 zoom および center パラメーターは、それぞれマップのズームレベルと中心点の座標を表します。

次に、検索サービスを使用して、その場所の交通情報をクエリします。 AMAP は、ルートや交通状況などの運転ルート計画情報を取得するための AMap.Driving クラスを提供します。

var driving = new AMap.Driving({
  map: map,
  panel: 'panel',
});

driving.search([{ keyword: '地点1' }, { keyword: '地点2' }], function (status, result) {
  if (status === 'complete') {
    // 获取路况信息
    var routes = result.routes;
    // 处理路况信息
    // ...
  } else {
    console.log('路线规划失败');
  }
});

ログイン後にコピー

ここで、driving.search メソッドは、複数の位置キーを含む配列とコールバック関数を受け取ります。コールバック関数の status パラメータはルート計画のステータスを示し、result パラメータはクエリ結果を含むオブジェクトです。 result.routes 属性を検索すると、特定の交通情報を取得できます。

交通情報を取得したら、地図上にルートを描画するなどの処理を行うことができます。

var polyline = new AMap.Polyline({
  path: result.routes[0].path,
  strokeColor: "#3366FF",
  strokeOpacity: 1.0,
  strokeWeight: 6,
  strokeStyle: "solid",
});

polyline.setMap(map);

ログイン後にコピー

ここでは、ポリラインオブジェクトを作成し、path プロパティを設定してポリラインの座標点を指定します。ポリラインの色、透明度、太さ、スタイルを設定することもできます。最後に、ポリラインオブジェクトをマップに追加します。

地図上にルートを描画するだけでなく、panel パラメーターを使用してページ上に詳細なルート情報を表示することもできます。