Oto, czego używam do wyświetlania mapy z 3 pinami / znacznikami:
<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>
To, czego szukam, to sposób na uniknięcie konieczności „ręcznego” znajdowania środka mapy za pomocą center: new google.maps.LatLng(41.923, 12.513)
. Czy istnieje sposób na automatyczne wyśrodkowanie mapy na trzech współrzędnych?
javascript
google-maps
google-maps-api-3
google-maps-markers
MultiformeIngegno
źródło
źródło
Odpowiedzi:
Jest łatwiejszy sposób, poprzez rozszerzenie pustego miejsca
LatLngBounds
zamiast tworzenia jednego z dwóch punktów. (Zobacz to pytanie, aby uzyskać więcej informacji)Powinien wyglądać mniej więcej tak, dodany do twojego kodu:
W ten sposób możesz użyć dowolnej liczby punktów i nie musisz wcześniej znać kolejności.
Demo jsFiddle tutaj: http://jsfiddle.net/x5R63/
źródło
setZoom
POfitBounds
fitBounds
pracował dla mnie w krótkim teście; daj mi znać, jeśli nadal masz problemy.map.panToBounds(bounds);
służy do automatycznego powiększania.Myślę, że musisz obliczyć min szerokości i długości geograficznej: Oto przykład z funkcją do wyśrodkowania punktu:
źródło
Aby znaleźć dokładny środek mapy, musisz przełożyć współrzędne lat / lon na współrzędne pikseli, a następnie znaleźć środek pikseli i przekonwertować go z powrotem na współrzędne lat / lon.
Możesz nie zauważyć ani nie przeszkadzać dryfowi w zależności od tego, jak daleko jesteś na północ lub południe od równika. Dryf można zobaczyć, wykonując map.setCenter (map.getBounds (). GetCenter ()) wewnątrz setInterval, dryf powoli zniknie w miarę zbliżania się do równika.
Możesz użyć poniższej metody do translacji między współrzędnymi lat / lon i pikselami. Współrzędne pikseli są oparte na całkowicie powiększonej płaszczyźnie całego świata, ale można znaleźć jej środek i przełączyć z powrotem na lat / lon.
źródło
Używam powyższej metody, aby ustawić granice mapy, a następnie zamiast resetować poziom powiększenia, po prostu obliczam średnią LAT i średnią LON i ustawiam punkt środkowy dla tej lokalizacji. Sumuję wszystkie wartości lat do latTotal i wszystkie wartości lon do lontotal, a następnie dzielę przez liczbę znaczników. Następnie ustawiam punkt środkowy mapy na te wartości średnie.
latCenter = latTotal / markercount; lonCenter = lontotal / markercount;
źródło
miałem sytuację, w której nie mogę zmienić starego kodu, więc dodałem tę funkcję javascript, aby obliczyć punkt środkowy i poziom powiększenia:
źródło
Oto moje zdanie na ten temat, na wypadek gdyby ktoś natknął się na ten wątek:
Pomaga to chronić przed nieliczbowymi danymi niszczącymi którąkolwiek z twoich zmiennych końcowych, które określają
lat
ilng
.Działa poprzez podejmowanie we wszystkich swoich współrzędnych, analizowania ich w oddzielnych
lat
ilng
elementów tablicy, a następnie określania średnio każda. Ta średnia powinna być centrum (i okazała się prawdziwa w moich testowych przypadkach).źródło