Buat acara klik tindanan poligon peta menggunakan PHP dan API Amap-tutorial php-php.cn

Buat acara klik tindanan poligon peta menggunakan PHP dan API Amap

WBOY

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

asal

1054 orang telah melayarinya

Gunakan PHP dan API Amap untuk mencipta peristiwa klik tindanan poligon pada peta

Pengenalan:
Dengan pembangunan aplikasi web, peta telah menjadi salah satu komponen yang biasa digunakan dalam tapak web. Pada masa yang sama, banyak tapak web juga mempunyai permintaan yang lebih tinggi untuk interaktiviti peta, seperti mengklik pada tindanan pada peta untuk mencapai fungsi tertentu. Artikel ini akan memperkenalkan cara menggunakan PHP dan API Amap untuk mencipta tindanan poligon peta dan melaksanakan acara klik.

Persediaan:
Sebelum kita mula, kita perlu mendaftar akaun pembangun AutoNavi dan mencipta aplikasi perkhidmatan Web untuk mendapatkan Kunci API yang sepadan. Kunci API digunakan untuk mengenal pasti setiap aplikasi, jadi ia sangat penting.

Langkah 1: Sediakan persekitaran
Pertama, kita perlu menyediakan persekitaran PHP di bahagian pelayan. Anda boleh memilih untuk menggunakan XAMPP, WAMP atau alatan lain untuk membinanya.

Langkah 2: Buat halaman HTML
Buat halaman HTML pada pelayan dan pautkannya ke perpustakaan JavaScript API Amap. Pada masa yang sama, buat bekas peta pada halaman sebagai kawasan paparan peta.

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

Salin selepas log masuk

Langkah Tiga: Buat Tindanan Poligon
Dalam bahagian JavaScript fail HTML di atas, kami mencipta contoh peta melalui new AMap.Map. Sekarang kita perlu menambah tindanan poligon pada peta.

// 创建多边形覆盖物的坐标数组
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);

Salin selepas log masuk

Langkah Empat: Tambah Acara Klik
Kini, kami telah menambah tindanan poligon pada peta. Langkah seterusnya ialah menambah acara klik pada tindanan ini.

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

Salin selepas log masuk

Contoh kod penuh:

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

Salin selepas log masuk

Jalankan kod di atas dan anda akan melihat tindanan poligon dengan kawasan yang ditentukan pada peta. Apabila anda mengklik pada tindanan ini, kotak gesaan muncul mengatakan "Anda mengklik pada tindanan poligon".

Kesimpulan:
Dengan menggunakan PHP dan API Amap, kami boleh membuat tindanan poligon peta dan melaksanakan acara klik dengan mudah. Aplikasi peta interaktif ini boleh digunakan secara meluas dalam hartanah, navigasi perjalanan dan bidang lain untuk memberikan pengalaman pengguna yang lebih baik dan sokongan berfungsi.

Atas ialah kandungan terperinci Buat acara klik tindanan poligon peta menggunakan PHP dan API Amap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!