Rumah >pembangunan bahagian belakang >tutorial php >Buat penanda peta interaktif menggunakan PHP dan API Amap

Buat penanda peta interaktif menggunakan PHP dan API Amap

王林asal: 2023-07-31 17:06:211398semak imbas

Gunakan PHP dan API Amap untuk mencipta penanda peta interaktif

Pengenalan:
Dalam era Internet mudah alih moden, perkhidmatan peta telah menjadi salah satu alat yang sangat diperlukan untuk orang ramai. Sama ada anda sedang mencari lokasi, merancang laluan atau mencari maklumat tentang persekitaran anda, Peta boleh membantu. API Amap menyediakan perkhidmatan peta yang kaya, digabungkan dengan keupayaan pemprosesan yang berkuasa bahasa PHP, kami boleh menggunakan kedua-duanya untuk mencipta penanda peta interaktif.

Persediaan:

Daftar akaun pembangun Amap.
Buat aplikasi perkhidmatan web baharu dan dapatkan kunci pembangun.

Pelaksanaan kod:
Pertama, kita perlu menyediakan struktur halaman HTML asas untuk menampung peta dan fungsi interaktif yang sepadan.

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

Analisis:

Dengan memperkenalkan pautan sumber Amap dan perpustakaan jQuery, kami boleh menggunakan API berkaitan dalam halaman.
Buat objek peta dan tetapkan tahap zum dan koordinat titik tengah.
Kawalan peta ditambah termasuk bar alat zum.
Dengar acara klik pada peta dan dapatkan koordinat latitud dan longitud lokasi klik.
Mencipta objek penanda dan menambahkannya pada peta.
Mencipta objek borang maklumat dan memaparkan maklumat latitud dan longitud apabila titik penanda diklik.

Nota: Gantikan

dalam kod dengan kunci pembangun anda sendiri. YOUR_KEY

Ringkasan:

Artikel ini menggunakan bahasa PHP dan API Amap untuk melaksanakan contoh penandaan peta interaktif yang mudah. Pembaca boleh mengembangkan lagi fungsi mengikut keperluan mereka sendiri dan dokumentasi API peta, seperti menambah perancangan laluan, fungsi carian, dsb. Menggunakan perkhidmatan peta, kami boleh menyediakan pengguna paparan maklumat geografi yang lebih mudah dan pengalaman interaktif.

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

php jquery html 对象事件 https

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Kemahiran operasi pangkalan data PHP: Cara menggunakan fungsi mysqli_num_rows untuk mendapatkan bilangan baris dalam hasil pertanyaanArtikel seterusnya：Kemahiran operasi pangkalan data PHP: Cara menggunakan fungsi mysqli_num_rows untuk mendapatkan bilangan baris dalam hasil pertanyaan

Artikel berkaitan

Lihat lagi