JSとBaidu Mapsを使って地図ルートナビゲーション機能を実装する方法

JS と Baidu Maps を使用して地図ルート ナビゲーション機能を実装する方法

技術の継続的な進歩により、地図ナビゲーション機能は私たちの生活に欠かせないものになりました。そして、Webページに地図ルートナビゲーション機能を実装するにはどうすればよいでしょうか?この記事では、JS と Baidu Map API を使用してこの機能を実装する方法と、具体的なコード例を紹介します。

ステップ 1: Baidu Map API キーを取得する

まず、Baidu Map API キーを申請して取得する必要があります。 Baidu Map Open Platformの公式サイトで開発者アカウントを申請し、アプリケーションを作成します。作成が成功すると、Baidu Maps API インターフェイスを呼び出すために使用される固有の API キーを取得します。

ステップ 2: Baidu Map API と関連 JS ファイルを導入する

Baidu Map API の JS ファイルと関連 JS ファイルを HTML ファイルの

タグに導入します。次に例を示します。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的API密钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>

ステップ 3: マップ コンテナを作成する

HTML ファイルの

タグ内にマップをホストする DIV コンテナを作成します。例:

<div id="mapContainer"></div>

ステップ 4: マップの初期化と表示

JS ファイルで Baidu Map API の Map クラスを使用してマップを初期化し、ページ上のマップ コンテナーに表示します。 。例:

var map = new BMap.Map("mapContainer"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建一个中心点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和缩放级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放功能

この時点で、ブラウザに地図が表示されているエリアが表示されるはずです。

ステップ 5: ナビゲーション コントロールを追加する

Baidu Map API の NavigationControl クラスを使用して、地図のズームおよびパン操作をサポートするナビゲーション コントロールを追加します。例:

var navigationControl = new BMap.NavigationControl();
map.addControl(navigationControl);

ステップ 6: 開始点と終了点を追加する

Baidu Map API の Marker クラスを使用して開始点と終了点を追加し、開始点と終了点の位置を表示します。例:

var startMarker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建起点标注
var endMarker = new BMap.Marker(new BMap.Point(116.434, 39.908)); // 创建终点标注
map.addOverlay(startMarker); // 添加起点标注到地图上
map.addOverlay(endMarker); // 添加终点标注到地图上

ステップ 7: ルート計画の追加

Baidu Map API の DrivingRoute クラスを使用して、走行ルートを計画し、地図上に表示します。例:

var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
driving.search("起点", "终点");

ステップ 8: コントロールの追加

Baidu Map API の GeolocationControl クラスを使用して、現在のユーザーの位置を特定するための位置コントロールを追加します。例:

var geolocationControl = new BMap.GeolocationControl();
map.addControl(geolocationControl);

ステップ 9: インタラクション ロジックを改善する

開始点と終了点をクリックして情報ウィンドウをポップアップするなど、インタラクション ロジックを追加します。例:

startMarker.addEventListener("click", function () {
  var infoWindow = new BMap.InfoWindow("这是起点");
  this.openInfoWindow(infoWindow);
});

endMarker.addEventListener("click", function () {
  var infoWindow = new BMap.InfoWindow("这是终点");
  this.openInfoWindow(infoWindow);
});

上記の手順をすべて完了すると、Web ページに地図ルート ナビゲーション機能を実装できます。もちろん、上記のコードは単なる例であり、実際のニーズに応じて拡張および最適化できます。この記事がお役に立てば幸いです!

以上がJSとBaidu Mapsを使って地図ルートナビゲーション機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。