Gambar radius di sekitar suatu titik di peta Google

Saya menggunakan Google Maps API dan telah menambahkan penanda. Sekarang saya ingin menambahkan radius 10 mil di sekitar setiap penanda, yang berarti lingkaran yang berperilaku sesuai saat melakukan zoom. Saya tidak tahu bagaimana melakukan itu dan sepertinya itu bukan sesuatu yang umum.

Saya menemukan satu contoh yang kelihatannya bagus , dan Anda juga dapat melihat Google Latitude. Di sana mereka menggunakan penanda dengan radius, seperti yang saya inginkan.

Pembaruan: Google Latitude menggunakan gambar yang diskalakan, bagaimana cara kerjanya? _{^{(fitur tidak digunakan lagi)}}

Menggunakan Google Maps API V3, buat objek Circle, lalu gunakan bindTo () untuk mengikatnya ke posisi Marker Anda (karena keduanya adalah instance google.maps.MVCObject).

// Create marker 
var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(53, -2.5),
  title: 'Some location'
});

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 16093,    // 10 miles in metres
  fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');

Anda dapat membuatnya terlihat seperti lingkaran Google Latitude dengan mengubah fillColor, strokeColor, strokeWeight, dll ( API lengkap ).

Lihat lebih banyak kode sumber dan contoh tangkapan layar .

Tampaknya metode yang paling umum untuk mencapai hal ini adalah menggambar GPolygon dengan titik yang cukup untuk mensimulasikan lingkaran. Contoh yang Anda referensikan menggunakan metode ini. Halaman ini memiliki contoh yang bagus - cari fungsi drawCircle di kode sumber.

Dalam bentuk geometri bola ditentukan oleh titik, garis, dan sudut di antara garis tersebut. Anda hanya memiliki nilai-nilai dasar untuk dikerjakan.

Oleh karena itu, lingkaran (dalam istilah bentuk yang diproyeksikan ke bola) adalah sesuatu yang harus didekati dengan menggunakan titik. Semakin banyak poin, semakin terlihat seperti lingkaran.

Karena itu, sadari bahwa google maps memproyeksikan bumi ke permukaan yang datar (pikirkan "membuka gulungan" bumi dan merentangkan + meratakan hingga terlihat "persegi"). Dan jika Anda memiliki sistem koordinat datar, Anda dapat menggambar objek 2D sesuka Anda.

Dengan kata lain Anda dapat menggambar lingkaran vektor berskala di peta google. Masalahnya adalah, peta google tidak memberikannya kepada Anda di luar kotak (mereka ingin tetap sedekat mungkin dengan nilai GIS secara pragmatis mungkin). Mereka hanya memberi Anda GPolygon yang mereka ingin Anda gunakan untuk memperkirakan lingkaran. Namun, orang ini melakukannya dengan menggunakan vml untuk IE dan svg untuk browser lain (lihat bagian "LINGKARAN BERKALA").

Sekarang, kembali ke pertanyaan Anda tentang Google Latitude menggunakan gambar lingkaran berskala (dan ini mungkin yang paling berguna bagi Anda): jika Anda tahu jari-jari lingkaran Anda tidak akan pernah berubah (mis. Selalu 10 mil di sekitar suatu titik), maka solusi termudah adalah dengan menggunakan GGroundOverlay , yang hanya berupa url gambar + GLatLngBounds yang diwakili oleh gambar. Satu-satunya pekerjaan yang perlu Anda lakukan adalah menghubungkan GLatLngBounds yang mewakili radius 10 mil Anda. Setelah Anda memilikinya, api google maps menangani penskalaan gambar Anda saat pengguna memperbesar dan memperkecil.

Saya pernah mengalami masalah ini di masa lalu, jadi saya menandai diskusi ini .

Untuk meringkasnya, Anda dapat:

1. Lihatlah kode sumber filter lingkaran ini dan cari tahu bagaimana menggabungkannya ke dalam proyek Anda.
2. Gambarlah GPolygon dengan titik yang cukup untuk mensimulasikan lingkaran.
3. Buat file KML dengan memodifikasi http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024 kemudian mengimpornya. Di Google Maps, Anda cukup menempelkan URI di kotak pencarian dan itu akan ditampilkan di peta. Saya tidak yakin bagaimana Anda dapat melakukannya dengan menggunakan API.

Saya baru saja menulis artikel blog yang membahas hal ini, yang mungkin berguna bagi Anda: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

Pada dasarnya, Anda perlu membuat GGroundOverlay dengan GLatLngBounds yang benar. Sedikit rumit dalam mengerjakan koordinat sudut barat daya dan koordinat sudut timur laut dari persegi imajiner ini (GLatLngBounds) yang membatasi lingkaran ini, berdasarkan radius yang diinginkan. Perhitungannya cukup rumit, tetapi Anda bisa merujuk ke fungsi getDestLatLng di blog. Sisanya harus cukup mudah.

Untuk solusi API v3, lihat:

http://blog.enbake.com/draw-circle-with-google-maps-api-v3

Ini menciptakan lingkaran di sekitar titik dan kemudian menunjukkan penanda di dalam dan di luar jangkauan dengan warna berbeda. Mereka juga menghitung radius dinamis tetapi dalam kasus Anda jari-jari tetap jadi mungkin akan lebih sedikit pekerjaan.