用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，实现一个基础的交互式地图标记功能。开发者可以在此基础上，按照需求扩展路线规划、地理位置搜索等更多实用功能。地图技术的应用能极大提升用户体验，带来便捷的地理信息展示与交互。

相关标签:
API