Create interactive map markers using PHP and Amap API-PHP Tutorial-php.cn

Create interactive map markers using PHP and Amap API

王林

Release： 2023-07-31 17:08:01

Original

1366 people have browsed it

Use PHP and Amap API to create interactive map markers

Introduction:
In the modern mobile Internet era, map services have become one of the indispensable tools for people. Whether you're looking for a location, planning a route, or searching for information about your surroundings, Maps can help. Amap API provides rich map services, combined with the powerful processing capabilities of PHP language, we can use the two to create interactive map markers.

Preparation:

Register an AutoNavi developer account.
Create a new web service application and obtain the developer key.

Code implementation:
First, we need to prepare a basic HTML page structure to accommodate the map and corresponding interactive functions.

<!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>

Copy after login

Analysis:

By introducing the resource links of Amap and jQuery library, we can use related APIs in the page.
Create a map object and set the zoom level and center point coordinates.
Added map controls, including zoom toolbar.
Listen to the click event of the map and obtain the latitude and longitude coordinates of the click location.
Creates a marker object and adds it to the map.
Create an information form object and display the latitude and longitude information when the marker point is clicked.

Note:

Replace YOUR_KEY in the code with your own developer key.
Since the Amap API uses the HTTPS protocol, it is recommended to deploy the web page on a server that supports HTTPS to avoid browser errors.

Summary:
This article uses the PHP language and the Amap API to implement a simple interactive map marking example. Readers can further expand the functions according to their own needs and the documentation of the map API, such as adding route planning, search functions, etc. Using map services, we can provide users with a more convenient geographical information display and interactive experience.

The above is the detailed content of Create interactive map markers using PHP and Amap API. For more information, please follow other related articles on the PHP Chinese website!