PHPを使用してガードマップAPIを組み合わせて、インタラクティブマップマーキング機能を簡単に実装する

M66 2025-07-17

PHPとGaodeマップAPIを使用してインタラクティブマップマーカーを作成します

モバイルインターネットの時代では、MAPサービスはユーザーが地理情報を取得するための重要なツールになりました。場所を見つけたり、ルートを計画したり、周囲を探索したりするかどうかにかかわらず、このマップは非常に便利です。 Gaode Map APIは、PHPの強力なバックエンド処理機能と組み合わせたリッチインターフェイスを提供し、機能を備えたリッチなインタラクティブマップを簡単に作成できます。

準備

まず、Gaode Developerアカウントを登録し、新しいWebサービスアプリケーションを作成し、APIを呼び出すために必要な条件である開発者キー（キー）を取得する必要があります。

コード実装

以下は、インタラクティブマップタグを実装する基本的なHTML構造と関連コードです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>インタラクティブマップマーキングの例</title>
  <style>
    #map {
      width: 100%;
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>
  <script src="https://webapi.amap.com/ui/1.1/main.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    // マップオブジェクトを作成します
    var map = new AMap.Map("map", {
      zoom: 13, // マップズームレベルを設定します
      center: [116.397428, 39.90923] // マップの中心点の座標を設定します
    });

    // マップコントロールを追加します
    AMap.plugin(['AMap.ToolBar'], function() {
      map.addControl(new AMap.ToolBar());
    });

    // マップイベントをクリックします
    map.on('click', function(e) {
      // クリックの緯度と経度の座標を取得します
      var lnglat = e.lnglat;
      var longitude = lnglat.getLng();
      var latitude = lnglat.getLat();

      // 作成する Marker オブジェクトとマップに追加します
      var marker = new AMap.Marker({
        position: [longitude, latitude]
      });
      map.add(marker);

      // ポップアップウィンドウには、緯度と経度情報が表示されます
      var infoWindow = new AMap.InfoWindow({
        content: '経度：' + longitude + '<br>緯度：' + latitude
      });
      marker.on('click', function() {
        infoWindow.open(map, marker.getPosition());
      });
    });
  </script>
</body>
</html>

コード解析

関連するAPIの呼び出しを容易にするために、Gaode MapとjQuery Libraryリソースを紹介します。
マップオブジェクトを作成し、初期ズームレベルと中心点を設定します。
ツールバーコントロールを追加して、マップインタラクティブ性を強化します。
マップクリックイベントを聞いて、クリック場所の緯度と経度を取得します。
マーキングポイントを生成し、マップに追加します。
マークポイントポップアップウィンドウをクリックして、対応する緯度と経度情報を表示します。

注意すべきこと

コード内のYour_keyを、Gaode Openプラットフォームで適用した開発者キーに置き換えてください。
Gaode Map APIはHTTPSプロトコルを採用しており、ブラウザのセキュリティ警告を回避するためにHTTPSをサポートするサーバーにWebページを展開することをお勧めします。

要約します

この記事では、PHPとGaode Map APIを組み合わせて、基本的なインタラクティブマップマーキング関数を実装する方法を示しています。これに基づいて、開発者はルート計画、地理的位置検索、およびその他の実用的な機能をニーズに応じて拡大できます。マップテクノロジーの適用は、ユーザーエクスペリエンスを大幅に改善し、地理的情報の便利な表示と相互作用をもたらすことができます。

関連タグ:
API