Ini yang saya gunakan untuk menampilkan peta dengan 3 pin / spidol:
<script>
function initialize() {
var locations = [
['DESCRIPTION', 41.926979, 12.517385, 3],
['DESCRIPTION', 41.914873, 12.506486, 2],
['DESCRIPTION', 41.918574, 12.507201, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(41.923, 12.513),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<div id="map" style="width: 900px; height: 700px;"></div>
Apa yang saya cari adalah cara untuk menghindari keharusan "secara manual" menemukan pusat peta center: new google.maps.LatLng(41.923, 12.513)
. Apakah ada cara untuk membuat peta secara otomatis terpusat pada tiga koordinat?
javascript
google-maps
google-maps-api-3
google-maps-markers
MultiformeIngegno
sumber
sumber
Jawaban:
Ada cara yang lebih mudah, dengan memperluas yang kosong
LatLngBounds
daripada membuat satu secara eksplisit dari dua poin. (Lihat pertanyaan ini untuk lebih jelasnya)Seharusnya terlihat seperti ini, ditambahkan ke kode Anda:
Dengan cara ini, Anda dapat menggunakan jumlah poin yang berubah-ubah, dan tidak perlu mengetahui urutan sebelumnya.
Demo jsFiddle di sini: http://jsfiddle.net/x5R63/
sumber
setZoom
SETELAHfitBounds
fitBounds
bekerja untuk saya dalam tes singkat; beri tahu saya jika Anda masih mengalami masalah.map.panToBounds(bounds);
untuk zoom otomatis.Saya pikir Anda harus menghitung min latitudine dan bujur: Ini adalah Contoh dengan fungsi yang digunakan untuk memusatkan titik Anda:
sumber
Untuk menemukan pusat peta yang tepat, Anda perlu menerjemahkan koordinat lat / lon menjadi koordinat piksel dan kemudian menemukan pusat piksel dan mengubahnya kembali menjadi koordinat lat / lon.
Anda mungkin tidak melihat atau keberatan dengan penyimpangan tergantung seberapa jauh Anda berada di utara atau selatan khatulistiwa. Anda dapat melihat drift dengan melakukan map.setCenter (map.getBounds (). GetCenter ()) di dalam setInterval, drift perlahan-lahan akan menghilang saat mendekati khatulistiwa.
Anda dapat menggunakan yang berikut ini untuk menerjemahkan antara koordinat lat / lon dan piksel. Koordinat piksel didasarkan pada bidang seluruh dunia yang diperbesar sepenuhnya, tetapi Anda kemudian dapat menemukan pusatnya dan mengubahnya kembali menjadi lat / lon.
sumber
Saya menggunakan metode di atas untuk mengatur batas peta, lalu, alih-alih mengatur ulang tingkat zoom, saya hanya menghitung LAT rata-rata dan LON rata-rata dan mengatur titik pusat ke lokasi itu. Saya menjumlahkan semua nilai lat ke dalam latTotal dan semua nilai lon ke dalam lontotal dan kemudian membaginya dengan jumlah marker. Saya kemudian mengatur titik pusat peta ke nilai rata-rata tersebut.
latCenter = latTotal / markercount; lonCenter = lontotal / markercount;
sumber
saya mengalami situasi di mana saya tidak dapat mengubah kode lama, jadi tambahkan fungsi javascript ini untuk menghitung titik pusat dan tingkat zoom:
sumber
Inilah pendapat saya tentang hal ini jika ada yang menemukan utas ini:
Ini membantu melindungi terhadap data non-numerik yang menghancurkan salah satu variabel terakhir Anda yang menentukan
lat
danlng
.Ini bekerja dengan mengambil semua koordinat Anda, menguraikannya menjadi elemen-elemen terpisah
lat
danlng
array, kemudian menentukan rata-rata masing-masing. Rata-rata itu harus menjadi pusat (dan telah terbukti benar dalam kasus pengujian saya.)sumber