Menggunakan Google Maps API untuk Jarak Radial

Pengarang: Eugene Taylor
Tarikh Penciptaan: 10 Ogos 2021
Tarikh Kemas Kini: 12 Mungkin 2024
Anonim
Drawing a Radius Circle in Google Maps 2020
Video.: Drawing a Radius Circle in Google Maps 2020

Kandungan

Anda boleh menyesuaikan peta Google untuk memenuhi keperluan khalayak spesifik tapak anda dengan Maps API 3.0. Satu kaedah pemperibadian adalah untuk memasukkan bulatan yang menunjukkan radius jarak di sekitar tempat tertentu. Anda boleh, contohnya, menunjukkan radius lima batu di sekitar tempat pelancongan supaya pelawat boleh melihat hotel dan restoran berdekatan. Untuk membuat jejari jarak di sekitar lokasi atau titik, gunakan kelas "Lingkaran" dalam Peta Google.


Arahan

  1. Buka fail HTML dan pergi ke bahagian yang mengandungi kod peta Google.

  2. Tatal ke bawah kod sehingga anda mencari lokasi penanda. Untuk mencari penanda buku dengan mudah, cari istilah "google.maps.Marker" dalam fail HTML.

  3. Di bawah tempat anda menetapkan penanda, buat lapisan "Lingkaran" dan pasangkannya. Sebagai contoh, taipkan:

    var circleExample = new google.maps.Circle ({map: map

  4. Tambah jejari bulatan yang akan berada di sekeliling penanda dalam meter:

    var circleExample = new google.maps.Circle ({map: radius peta: 5000

  5. Buat warna isian untuk bulatan. Anda menetapkan warna menggunakan format heksadesimal. Sebagai contoh, taipkan:

    var circleExample = new google.maps.Circle ({map: radius peta: 5000 fillColor = #FFFFFF});

  6. Bersekutu, atau tambah, bulatan ke penanda:

    var circleExample = new google.maps.Circle ({map: radius peta: 5000 fillColor = #FFFFFF}); circleExample.bindTo ('peta', penanda);


  7. Simpan peta dan ujian. Peta Google akan memaparkan jejari putih sepanjang 5,000 meter di sekitar lokasi penanda.