用PHP結合高德地圖API輕鬆實現交互式地圖標記功能

M66 2025-07-17

利用PHP和高德地圖API創建交互式地圖標記

在移動互聯網時代，地圖服務已成為用戶獲取地理信息的重要工具。無論是查找位置、規劃路線還是探索周邊，地圖都提供了極大便利。高德地圖API提供了豐富的接口，結合PHP強大的後台處理能力，可以輕鬆打造功能豐富的交互式地圖。

準備工作

首先需要註冊高德開發者賬號，創建一個新的Web服務應用並獲取開發者密鑰（key），這是調用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>

代碼解析

引入高德地圖和jQuery庫資源，方便調用相關API。
創建地圖對象，設置初始縮放級別及中心點。
添加工具條控件，增強地圖交互性。
監聽地圖點擊事件，獲取點擊位置的經緯度。
生成標記點並添加至地圖。
點擊標記點彈出窗口，顯示對應的經緯度信息。

注意事項

請將代碼中YOUR_KEY替換成您在高德開放平台申請到的開發者密鑰。
高德地圖API採用HTTPS協議，建議將網頁部署在支持HTTPS的服務器上，避免瀏覽器安全警告。

總結

本文示範瞭如何結合PHP與高德地圖API，實現一個基礎的交互式地圖標記功能。開發者可以在此基礎上，按照需求擴展路線規劃、地理位置搜索等更多實用功能。地圖技術的應用能極大提升用戶體驗，帶來便捷的地理信息展示與交互。