Create a map's polygon overlay click event using PHP and Amap API-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

Create a map's polygon overlay click event using PHP and Amap API

Jul 31, 2023 pm 08:21 PM

php click event polygon Gaode map cover

Use PHP and Amap API to create the polygon overlay click event of the map

Introduction:
With the development of web applications, maps have become one of the commonly used components in websites. At the same time, many websites also have higher demands for map interactivity, such as clicking on overlays on the map to achieve certain functions. This article will introduce how to use PHP and Amap API to create a polygon overlay of the map and implement click events.

Preparation work:
Before starting, we need to register an AutoNavi developer account and create a Web service application to obtain the corresponding API Key. API Key is used to identify each application, so it is very important.

Step 1: Set up the environment
First, we need to set up a PHP environment on the server side. You can choose to use XAMPP, WAMP or other tools to build it.

Step 2: Create an HTML page
Create an HTML page on the server and link it to the JavaScript library of the Amap API. At the same time, create a map container on the page as the map display area.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;利用PHP和高德地图API创建地图的多边形覆盖物点击事件&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        #mapContainer {
            width: 500px;
            height: 400px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;mapContainer&quot;&gt;&lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;https://webapi.amap.com/maps?v=1.4.15&amp;key=YOUR_API_KEY&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        var map = new AMap.Map('mapContainer', {
            zoom: 13,
            center: [116.39, 39.9]
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Step 3: Create a polygon overlay
In the JavaScript part of the above HTML file, we create a map instance through new AMap.Map. Now we need to add a polygon overlay to the map.

// 创建多边形覆盖物的坐标数组
var polygonPath = [
    [116.403322, 39.920255],
    [116.410703, 39.897555],
    [116.402292, 39.892353],
    [116.389846, 39.891365],
    [116.381966, 39.899163]
];

// 创建多边形覆盖物
var polygon = new AMap.Polygon({
    path: polygonPath,
    strokeColor: &quot;#FF33FF&quot;,
    strokeWeight: 6,
    fillColor: &quot;#1791fc&quot;,
    fillOpacity: 0.2
});

// 将多边形覆盖物添加到地图上显示
map.add(polygon);

Copy after login

Step Four: Add Click Event
Now, we have added a polygon overlay to the map. The next step is to add a click event to this overlay.

// 监听多边形覆盖物的点击事件
AMap.event.addListener(polygon, 'click', function () {
    alert(&quot;您点击了多边形覆盖物&quot;);
});

Copy after login

Full code example:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;利用PHP和高德地图API创建地图的多边形覆盖物点击事件&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        #mapContainer {
            width: 500px;
            height: 400px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;mapContainer&quot;&gt;&lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;https://webapi.amap.com/maps?v=1.4.15&amp;key=YOUR_API_KEY&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        var map = new AMap.Map('mapContainer', {
            zoom: 13,
            center: [116.39, 39.9]
        });

        // 创建多边形覆盖物的坐标数组
        var polygonPath = [
            [116.403322, 39.920255],
            [116.410703, 39.897555],
            [116.402292, 39.892353],
            [116.389846, 39.891365],
            [116.381966, 39.899163]
        ];

        // 创建多边形覆盖物
        var polygon = new AMap.Polygon({
            path: polygonPath,
            strokeColor: &quot;#FF33FF&quot;,
            strokeWeight: 6,
            fillColor: &quot;#1791fc&quot;,
            fillOpacity: 0.2
        });

        // 将多边形覆盖物添加到地图上显示
        map.add(polygon);

        // 监听多边形覆盖物的点击事件
        AMap.event.addListener(polygon, 'click', function () {
            alert(&quot;您点击了多边形覆盖物&quot;);
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Run the above code and you will see a polygon overlay with the specified area on the map. When you click on this overlay, a prompt box pops up saying "You clicked on the polygon overlay".

Conclusion:
By using PHP and Amap API, we can easily create polygon overlays of the map and implement click events. This interactive map application can be widely used in real estate, travel navigation and other fields to provide better user experience and functional support.

The above is the detailed content of Create a map's polygon overlay click event using PHP and Amap API. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn