Erstellen Sie mit PHP und der Amap-API das Polygon-Overlay-Klickereignis einer Karte-PHP-Tutorial-php.cn

Erstellen Sie mit PHP und der Amap-API das Polygon-Overlay-Klickereignis einer Karte

WBOY

Freigeben： 2023-07-31 20:22:01

Original

1079 Leute haben es durchsucht

Verwenden Sie PHP und die Amap-API, um das Polygon-Overlay-Klickereignis der Karte zu erstellen.

Einführung:
Mit der Entwicklung von Webanwendungen sind Karten zu einer der am häufigsten verwendeten Komponenten auf Websites geworden. Gleichzeitig stellen viele Websites auch höhere Anforderungen an die Karteninteraktivität, z. B. das Klicken auf Overlays auf der Karte, um bestimmte Funktionen zu erreichen. In diesem Artikel wird erläutert, wie Sie mit PHP und der Amap-API eine Polygonüberlagerung der Karte erstellen und Klickereignisse implementieren.

Vorbereitung:
Bevor wir beginnen, müssen wir ein AutoNavi-Entwicklerkonto registrieren und eine Webdienstanwendung erstellen, um den entsprechenden API-Schlüssel zu erhalten. Der API-Schlüssel wird zur Identifizierung jeder Anwendung verwendet und ist daher sehr wichtig.

Schritt 1: Umgebung einrichten
Zuerst müssen wir serverseitig eine PHP-Umgebung einrichten. Sie können zum Erstellen XAMPP, WAMP oder andere Tools verwenden.

Schritt 2: Erstellen Sie eine HTML-Seite
Erstellen Sie eine HTML-Seite auf dem Server und verknüpfen Sie diese mit der JavaScript-Bibliothek der Amap API. Erstellen Sie gleichzeitig einen Kartencontainer auf der Seite als Kartenanzeigebereich.

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

Nach dem Login kopieren

Schritt drei: Erstellen Sie das Polygon-Overlay
Im JavaScript-Abschnitt der obigen HTML-Datei erstellen wir über new AMap.Map eine Karteninstanz. Jetzt müssen wir der Karte ein Polygon-Overlay hinzufügen.

// 创建多边形覆盖物的坐标数组
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: "#FF33FF",
    strokeWeight: 6,
    fillColor: "#1791fc",
    fillOpacity: 0.2
});

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

Nach dem Login kopieren

Schritt vier: Klickereignis hinzufügen
Jetzt haben wir der Karte ein Polygon-Overlay hinzugefügt. Der nächste Schritt besteht darin, diesem Overlay ein Klickereignis hinzuzufügen.

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

Nach dem Login kopieren

Vollständiges Codebeispiel:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>利用PHP和高德地图API创建地图的多边形覆盖物点击事件</title>
    <style type="text/css">
        #mapContainer {
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="mapContainer"></div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>
    <script type="text/javascript">
        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: "#FF33FF",
            strokeWeight: 6,
            fillColor: "#1791fc",
            fillOpacity: 0.2
        });

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

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

Nach dem Login kopieren

Führen Sie den obigen Code aus und Sie sehen eine Polygonüberlagerung mit dem angegebenen Bereich auf der Karte. Wenn Sie auf dieses Overlay klicken, wird eine Eingabeaufforderung mit der Meldung „Sie haben auf das Polygon-Overlay geklickt“ angezeigt.

Fazit:
Durch die Verwendung von PHP und der Amap-API können wir problemlos polygonale Überlagerungen der Karte erstellen und Klickereignisse implementieren. Diese interaktive Kartenanwendung kann in großem Umfang in der Immobilienbranche, der Reisenavigation und anderen Bereichen eingesetzt werden, um ein besseres Benutzererlebnis und funktionale Unterstützung zu bieten.

Das obige ist der detaillierte Inhalt vonErstellen Sie mit PHP und der Amap-API das Polygon-Overlay-Klickereignis einer Karte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!