Cara menggunakan JS dan Amap untuk melaksanakan fungsi pengesyoran tarikan popular di lokasi

Cara menggunakan JS dan Amap untuk melaksanakan fungsi pengesyoran tarikan popular, anda memerlukan contoh kod khusus

1 Pengenalan
Dengan perkembangan pelancongan, semakin ramai orang suka melancong secara bebas dan berharap untuk mencari tempat tempatan Popular. tarikan untuk perancangan perjalanan yang lebih baik. Artikel ini akan menggunakan JavaScript dan API Amap untuk melaksanakan fungsi pengesyoran tarikan popular.

2. Proses pelaksanaan

1. Daftar akaun pembangun
   Pertama, kita perlu mendaftar akaun pembangun pada platform terbuka Amap. Selepas pendaftaran berjaya, anda boleh mendapatkan Kunci API, yang merupakan parameter yang diperlukan untuk memanggil API Amap.

2. Memperkenalkan API Amap
   Memperkenalkan API Amap ke dalam dokumen HTML boleh dicapai melalui kod berikut:

   <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>

   Ganti YOUR_API_KEY dengan Kunci API anda sendiri.

3. Buat bekas peta
   Buat elemen DOM dalam dokumen HTML sebagai bekas peta:

   <div id="map" style="width: 600px; height: 400px;"></div>

   Di sini lebar dan tinggi bekas ditetapkan.

4. Inisialisasikan peta
   Inisialisasikan peta dalam kod JavaScript, nyatakan titik tengah peta, tahap zum dan ID bekas peta:

   var map = new AMap.Map('map', {
     center: [116.397428, 39.90923],
     zoom: 13
   });

   Koordinat latitud dan longitud di sini ialah koordinat Beijing.

5. Tambah kawalan penentududukan
   Untuk memudahkan penentududukan, anda boleh menambah kawalan penentududukan pada peta:

   AMap.plugin('AMap.Geolocation', function() {
     var geolocation = new AMap.Geolocation({
    enableHighAccuracy: true,
    timeout: 10000
     });
   
     map.addControl(geolocation);
   
     geolocation.getCurrentPosition(function(status, result) {
    if (status === 'complete') {
      // 定位成功，更新地图中心点
      map.setCenter(result.position);
    }
     });
   });

   Dengan memanggil kelas AMap.Geolocation, buat tika Geolokasi dan tambahkannya pada peta. Kemudian panggil kaedah getCurrentPosition untuk mendapatkan latitud dan longitud lokasi semasa dan tetapkan titik tengah peta ke lokasi semasa.

6. Tambah penanda tarikan popular
   Seterusnya, kita perlu mendapatkan data tarikan popular dan menambah penanda pada peta. Biasanya, data ini boleh diperolehi melalui API bahagian belakang. Data tarikan simulasi digunakan di sini:

   var hotSpots = [
     {
    name: '故宫',
    location: [116.397428, 39.90923]
     },
     {
    name: '天安门广场',
    location: [116.397978, 39.903258]
     },
     {
    name: '颐和园',
    location: [116.272328, 39.991455]
     }
   ];

   Gunakan gelung for untuk melintasi data, kemudian buat penanda dan tambahkannya pada peta:

   for (var i = 0; i < hotSpots.length; i++) {
     var marker = new AMap.Marker({
    position: hotSpots[i].location,
    title: hotSpots[i].name
     });
   
     map.add(marker);
   }

7. Tambah acara klik
   Untuk membolehkan pengguna memaparkan maklumat terperinci tarikan apabila dia mengklik pada penanda, Kami boleh menambah acara klik pada setiap penanda untuk memaparkan tetingkap pop timbul apabila diklik:

   AMap.event.addListener(marker, 'click', function() {
     var infoWindow = new AMap.InfoWindow({
    content: '<h3>' + marker.getTitle() + '</h3>'
     });
   
     infoWindow.open(map, marker.getPosition());
   });

   Di sini kami menggunakan kaedah AMap.event.addListener untuk menambah acara klik pada penanda. Apabila pengguna mengklik penanda, contoh InfoWindow akan dibuat dan memaparkannya pada peta melalui kaedah terbuka.

8. Kesan akhir
   Melalui langkah di atas, kami telah berjaya melaksanakan fungsi mengesyorkan tarikan popular di lokasi. Penanda tarikan popular ditambahkan pada peta, dan maklumat terperinci tentang tarikan dipaparkan dengan mengklik pada penanda.

3 Ringkasan
Artikel ini menggunakan JavaScript dan API Amap untuk melaksanakan fungsi pengesyoran tarikan popular dalam beberapa langkah mudah. Dalam projek sebenar, kami boleh memanggil fungsi lain API Amap mengikut keperluan khusus untuk mencapai lebih banyak interaksi peta dan kesan paparan data. Saya harap artikel ini boleh membantu untuk pemula.

Atas ialah kandungan terperinci Cara menggunakan JS dan Amap untuk melaksanakan fungsi pengesyoran tarikan popular di lokasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!