JS と Baidu Maps を使用してマップパン機能を実装する方法-jsチュートリアル-php.cn

JS と Baidu Maps を使用してマップパン機能を実装する方法

PHPz

リリース： 2023-11-21 10:00:35

オリジナル

1410 人が閲覧しました

JS と Baidu Maps を使用してマップパン機能を実装する方法

JS と Baidu Map を使用してマップパン機能を実装する方法

Baidu Map は広く使用されている地図サービスプラットフォームで、Web 開発で地理情報を表示するためによく使用されます。位置決めやその他の機能。この記事では、JS と Baidu Map API を使用してマップパン機能を実装する方法と、具体的なコード例を紹介します。

1. 準備
Baidu Map API を使用する前に、まず Baidu Map Open Platform (http://lbsyun.baidu.com/) で開発者アカウントを申請し、アプリケーションを作成する必要があります。作成が完了すると、各リクエストの ID として使用される独自の AK (アクセスキー) を取得します。

2. Baidu Map API の導入
Baidu Map API のスクリプトファイルを HTML ファイルの

タグに導入します。コードは次のとおりです:

<head>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourAK"></script>
</head>

ログイン後にコピー

replace yourAK上記のコードでは、独自の AK 用です。

3. マップコンテナの作成
HTML ファイル内にマップを表示するためのコンテナ要素を作成します。このコンテナに ID を割り当てると、次のコードで ID によってコンテナを取得できるようになります。コードは次のとおりです:

<div id="mapContainer" style="width: 100%; height: 500px;"></div>

ログイン後にコピー

4. マップの初期化
JS ファイル内のマップオブジェクトを初期化します。コードは次のとおりです:

var map = new BMap.Map("mapContainer");

ログイン後にコピー

コード内の mapContainer を次のコードに置き換えます。作成したマップコンテナの ID。

5. 地図の中心点を設定します
地図の初期中心点を設定しますコードは次のとおりです:

var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);

ログイン後にコピー

このうち、116.404 が経度、39.915 が緯度です。中心点は実際のニーズに応じて設定できます。

6. マップパン機能の実装
次に、マップパン操作をトリガーする 2 つのボタンをページに追加する必要があります。コードは次のとおりです:

<button onclick="panLeft()">向左移动</button>
<button onclick="panRight()">向右移动</button>

ログイン後にコピー

次に、JS ファイルにパン関数のロジックを実装します。コードは次のとおりです:

function panLeft() {
  var mapCenter = map.getCenter();
  var newCenter = new BMap.Point(mapCenter.lng - 0.1, mapCenter.lat);
  map.panTo(newCenter);
}

function panRight() {
  var mapCenter = map.getCenter();
  var newCenter = new BMap.Point(mapCenter.lng + 0.1, mapCenter.lat);
  map.panTo(newCenter);
}

ログイン後にコピー

ここでは、panLeft() 関数を使用して、地図を左にパンし、panRight() 関数を使用して地図を右にパンします。コードでは、現在の地図の中心点の座標が、map.getCenter() メソッドを通じて取得され、新しい座標 newCenter が作成され、地図の中心点が、map.panTo() を通じて新しい座標に移動されます。）方法。

7. マップ表示を改善する
最後に、ホイールズーム機能をサポートするために、JS ファイルで map.enableScrollWheelZoom() メソッドを呼び出す必要があります。コードは次のとおりです。

map.enableScrollWheelZoom(true);

ログイン後にコピー

8. サンプルコード
以下は完全なサンプルコードです。




  
  地图平移示例
  


  <div id="mapContainer" style="width: 100%; height: 500px;"></div>

ログイン後にコピー

上記のコードを HTML ファイルとして保存し、そのファイルを次の場所で開きます。ブラウザ、つまりマップパン機能を備えた地図表示ページをご覧いただけます。アクションボタンをクリックすると、それに応じてマップが左または右に移動します。

概要
この記事では、JS と Baidu Map API を使用してマップパン機能を実装する方法を紹介し、具体的なコード例を示します。これらのサンプルコードを通じて、Baidu Map API の使用をすぐに開始し、独自のニーズを満たすマップパン機能を実装できます。

以上がJS と Baidu Maps を使用してマップパン機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JS と Baidu Maps を使用してマップ パン機能を実装する方法

JS と Baidu Maps を使用してマップパン機能を実装する方法