JS と Baidu Maps を使用して地図上にマルチポイントマーキング機能を実装する方法-jsチュートリアル-php.cn

JS と Baidu Maps を使用して地図上にマルチポイントマーキング機能を実装する方法

WBOY

リリース： 2023-11-21 15:10:59

オリジナル

1400 人が閲覧しました

JS と Baidu Maps を使用して地図上にマルチポイントマーキング機能を実装する方法

JS と Baidu Maps を使用して地図のマルチポイントマーキング機能を実装する方法

Web 開発では、位置を表示するために地図機能を使用する必要があることがよくあります。情報。 Baidu Maps は中国で最も広く使用されている地図 API の 1 つで、機能が豊富で使いやすいです。この記事では、JavaScript と Baidu Map API を使用して地図のマルチポイントマーキング機能を実装する方法と、具体的なコード例を紹介します。

まず、Baidu Map の JS ライブラリと関連 CSS ファイルを HTML ファイルに導入する必要があります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>地图多点标记</title>
  <style type="text/css">
    #container {
      width: 100%;
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
</body>
</html>

ログイン後にコピー

上記のコードでは、ID container を持つ div 要素を地図のコンテナとして使用し、Baidu Map API を導入しています。

次に、JavaScript ファイルで、Baidu Map API を使用して地図を作成し、地図の中心点とズームレベルを設定する必要があります。

var map = new BMap.Map("container");  // 创建地图实例
var point = new BMap.Point(116.404, 39.915);  // 设置地图中心点坐标
map.centerAndZoom(point, 15);  // 初始化地图，设置中心点坐标和缩放级别

ログイン後にコピー

上記のコードでは、まず BMap.Map コンストラクターを使用してマップインスタンスを作成します。次に、BMap.Point コンストラクターを通じて地図の中心点の座標が設定されます。ここでの座標は北京の経度と緯度です。最後に、map.centerAndZoom メソッドを使用してマップを初期化し、中心点の座標とズームレベルを設定します。

次に、マップ上に複数のポイントマーカーを追加する必要があります。 BMap.Marker コンストラクターを使用して、ポイントマーカーインスタンスを作成し、ポイントマーカーの位置を指定できます。

var marker1 = new BMap.Marker(new BMap.Point(116.404, 39.915));  // 创建点标记实例，并指定位置
var marker2 = new BMap.Marker(new BMap.Point(116.316, 39.910));
var marker3 = new BMap.Marker(new BMap.Point(116.417, 39.909));

ログイン後にコピー

上記のコードでは、北京の異なる場所に配置された 3 つのポイントマーカーを作成しました。

次に、map.addOverlay() メソッドを使用して、マップにポイントマーカーを追加します。

map.addOverlay(marker1);
map.addOverlay(marker2);
map.addOverlay(marker3);

ログイン後にコピー

上記のコードでは、map.addOverlay() メソッドを通じてマップにポイントマーカーを追加します。追加した 3 つのポイントマーカーが地図上に表示されます。

最後に、marker.setLabel() メソッドを使用して、ポイントマーカーにラベルテキストを追加できます。

marker1.setLabel(new BMap.Label("标记1", {offset: new BMap.Size(20,-10)}));
marker2.setLabel(new BMap.Label("标记2", {offset: new BMap.Size(20,-10)}));
marker3.setLabel(new BMap.Label("标记3", {offset: new BMap.Size(20,-10)}));

ログイン後にコピー

上記のコードでは、BMap.Label コンストラクターを通じてラベルテキストインスタンスを作成し、それをパラメーターとして marker.setLabel() メソッドに渡します。このようにして、対応するラベルのテキストが各ポイントマークに表示されます。

これで地図上の多点マーキング機能の実装が完了しました。完全なコード例は次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>地图多点标记</title>
  <style type="text/css">
    #container {
      width: 100%;
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
  <script>
    var map = new BMap.Map("container");  // 创建地图实例
    var point = new BMap.Point(116.404, 39.915);  // 设置地图中心点坐标
    map.centerAndZoom(point, 15);  // 初始化地图，设置中心点坐标和缩放级别

    var marker1 = new BMap.Marker(new BMap.Point(116.404, 39.915));  // 创建点标记实例，并指定位置
    var marker2 = new BMap.Marker(new BMap.Point(116.316, 39.910));
    var marker3 = new BMap.Marker(new BMap.Point(116.417, 39.909));

    map.addOverlay(marker1);
    map.addOverlay(marker2);
    map.addOverlay(marker3);

    marker1.setLabel(new BMap.Label("标记1", {offset: new BMap.Size(20,-10)}));
    marker2.setLabel(new BMap.Label("标记2", {offset: new BMap.Size(20,-10)}));
    marker3.setLabel(new BMap.Label("标记3", {offset: new BMap.Size(20,-10)}));
  </script>
</body>
</html>

ログイン後にコピー

上記のコードを通じて、HTML ページにマップのマルチポイントマーキング関数を実装できます。実際のニーズに応じて、マーカーの位置とラベルのテキストをカスタマイズして、より豊かな地図表示効果を実現できます。

Baidu Map API を使用する場合、コード内の Your Baidu Map API Key を、Baidu Map Open Platform で申請した API キーに置き換える必要があることに注意してください。

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