Auto-center mapa z wieloma znacznikami w Google Maps API v3
To jest to, 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>
Szukam sposobu 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?
8 answers
Jest łatwiejszy sposób, rozszerzając pusty LatLngBounds
zamiast tworzyć go wprost z dwóch punktów. (Zobacz to pytanie Po Więcej Szczegółów)
Powinno wyglądać coś takiego, dodane do Twojego kodu:
//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
//extend the bounds to include each marker's position
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//now fit the map to the newly inclusive bounds
map.fitBounds(bounds);
//(optional) restore the zoom level after the map is done scaling
var listener = google.maps.event.addListener(map, "idle", function () {
map.setZoom(3);
google.maps.event.removeListener(listener);
});
W ten sposób możesz użyć dowolnej liczby punktów i nie musisz znać kolejności wcześniej.
Demo jsfiddle tutaj: http://jsfiddle.net/x5R63/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:41
Myślę, że trzeba obliczyć szerokość geograficzną min i długość geograficzną min: Oto przykład z funkcją do wyśrodkowania punktu:
//Example values of min & max latlng values
var lat_min = 1.3049337;
var lat_max = 1.3053515;
var lng_min = 103.2103116;
var lng_max = 103.8400188;
map.setCenter(new google.maps.LatLng(
((lat_max + lat_min) / 2.0),
((lng_max + lng_min) / 2.0)
));
map.fitBounds(new google.maps.LatLngBounds(
//bottom left
new google.maps.LatLng(lat_min, lng_min),
//top right
new google.maps.LatLng(lat_max, lng_max)
));
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-30 15:08:26
Aby znaleźć dokładny środek mapy, musisz przetłumaczyć współrzędne lat/lon na współrzędne pikseli, a następnie znaleźć środek pikseli i przekształcić je z powrotem na współrzędne lat / lon.
Możesz nie zauważyć lub nie pamiętać dryfu w zależności od tego, jak daleko na północ lub południe od równika jesteś. Możesz zobaczyć dryf wykonując mapę.setCenter(map.getBounds().getCenter ()) wewnątrz setintervalu dryf powoli zniknie, gdy zbliża się do równika.Możesz użyć następujących tłumaczenie między współrzędnymi lat/lon i pikseli. Współrzędne pikseli są oparte na płaszczyźnie całego świata w pełni powiększonego, ale możesz znaleźć środek tego i przełączyć go z powrotem na lat / lon.
var HALF_WORLD_CIRCUMFERENCE = 268435456; // in pixels at zoom level 21
var WORLD_RADIUS = HALF_WORLD_CIRCUMFERENCE / Math.PI;
function _latToY ( lat ) {
var sinLat = Math.sin( _toRadians( lat ) );
return HALF_WORLD_CIRCUMFERENCE - WORLD_RADIUS * Math.log( ( 1 + sinLat ) / ( 1 - sinLat ) ) / 2;
}
function _lonToX ( lon ) {
return HALF_WORLD_CIRCUMFERENCE + WORLD_RADIUS * _toRadians( lon );
}
function _xToLon ( x ) {
return _toDegrees( ( x - HALF_WORLD_CIRCUMFERENCE ) / WORLD_RADIUS );
}
function _yToLat ( y ) {
return _toDegrees( Math.PI / 2 - 2 * Math.atan( Math.exp( ( y - HALF_WORLD_CIRCUMFERENCE ) / WORLD_RADIUS ) ) );
}
function _toRadians ( degrees ) {
return degrees * Math.PI / 180;
}
function _toDegrees ( radians ) {
return radians * 180 / Math.PI;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-04 01:49:30
This work for me in Angular 9:
import {GoogleMap, GoogleMapsModule} from "@angular/google-maps";
@ViewChild('Map') Map: GoogleMap; /* Element Map */
locations = [
{ lat: 7.423568, lng: 80.462287 },
{ lat: 7.532321, lng: 81.021187 },
{ lat: 6.117010, lng: 80.126269 }
];
constructor() {
var bounds = new google.maps.LatLngBounds();
setTimeout(() => {
for (let u in this.locations) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(this.locations[u].lat,
this.locations[u].lng),
});
bounds.extend(marker.getPosition());
}
this.Map.fitBounds(bounds)
}, 200)
}
I automatycznie Wyśrodkowuje mapę zgodnie ze wskazanymi pozycjami.
Wynik:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-18 22:10:26
Wypróbowałem wszystkie odpowiedzi na ten temat, ale tylko to poniżej działało dobrze w moim projekcie.
Angular 7 i AGM Core 1.0.0-beta.7
<agm-map [latitude]="lat" [longitude]="long" [zoom]="zoom" [fitBounds]="true">
<agm-marker latitude="{{localizacao.latitude}}" longitude="{{localizacao.longitude}}" [agmFitBounds]="true"
*ngFor="let localizacao of localizacoesTec">
</agm-marker>
</agm-map>
Właściwości [agmFitBounds]="true"
at agm-marker
i [fitBounds]="true"
at agm-map
wykonuje zadanie
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-11-06 18:12:33
Używam powyższej metody, aby ustawić granice mapy, a następnie, zamiast zresetować poziom powiększenia, I wystarczy obliczyć średnią LAT i średnią LON i ustawić punkt środkowy na tę lokalizację. Dodaję wszystkie wartości lat do latTotal i wszystkie wartości lon do lontotal, a następnie dzielę przez liczbę markerów. Następnie ustawiam punkt środkowy mapy na te średnie wartości.
LatCenter = latTotal / markercount; lonCenter = lontotal / markercount;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-31 15:44:47
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:
//input
var tempdata = ["18.9400|72.8200-19.1717|72.9560-28.6139|77.2090"];
function getCenterPosition(tempdata){
var tempLat = tempdata[0].split("-");
var latitudearray = [];
var longitudearray = [];
var i;
for(i=0; i<tempLat.length;i++){
var coordinates = tempLat[i].split("|");
latitudearray.push(coordinates[0]);
longitudearray.push(coordinates[1]);
}
latitudearray.sort(function (a, b) { return a-b; });
longitudearray.sort(function (a, b) { return a-b; });
var latdifferenece = latitudearray[latitudearray.length-1] - latitudearray[0];
var temp = (latdifferenece / 2).toFixed(4) ;
var latitudeMid = parseFloat(latitudearray[0]) + parseFloat(temp);
var longidifferenece = longitudearray[longitudearray.length-1] - longitudearray[0];
temp = (longidifferenece / 2).toFixed(4) ;
var longitudeMid = parseFloat(longitudearray[0]) + parseFloat(temp);
var maxdifference = (latdifferenece > longidifferenece)? latdifferenece : longidifferenece;
var zoomvalue;
if(maxdifference >= 0 && maxdifference <= 0.0037) //zoom 17
zoomvalue='17';
else if(maxdifference > 0.0037 && maxdifference <= 0.0070) //zoom 16
zoomvalue='16';
else if(maxdifference > 0.0070 && maxdifference <= 0.0130) //zoom 15
zoomvalue='15';
else if(maxdifference > 0.0130 && maxdifference <= 0.0290) //zoom 14
zoomvalue='14';
else if(maxdifference > 0.0290 && maxdifference <= 0.0550) //zoom 13
zoomvalue='13';
else if(maxdifference > 0.0550 && maxdifference <= 0.1200) //zoom 12
zoomvalue='12';
else if(maxdifference > 0.1200 && maxdifference <= 0.4640) //zoom 10
zoomvalue='10';
else if(maxdifference > 0.4640 && maxdifference <= 1.8580) //zoom 8
zoomvalue='8';
else if(maxdifference > 1.8580 && maxdifference <= 3.5310) //zoom 7
zoomvalue='7';
else if(maxdifference > 3.5310 && maxdifference <= 7.3367) //zoom 6
zoomvalue='6';
else if(maxdifference > 7.3367 && maxdifference <= 14.222) //zoom 5
zoomvalue='5';
else if(maxdifference > 14.222 && maxdifference <= 28.000) //zoom 4
zoomvalue='4';
else if(maxdifference > 28.000 && maxdifference <= 58.000) //zoom 3
zoomvalue='3';
else
zoomvalue='1';
return latitudeMid+'|'+longitudeMid+'|'+zoomvalue;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-30 08:09:26
Oto moje zdanie na ten temat, gdyby ktoś natknął się na ten wątek:
Pomaga to chronić przed Nie-numerycznymi danymi niszczącymi jedną z końcowych zmiennych, które określają lat
i lng
.
To działa poprzez pobranie wszystkich współrzędnych, parsowanie ich do oddzielnych lat
i lng
elementów tablicy, a następnie określenie średniej dla każdego z nich. Ta średnia powinna być centrum (i okazała się prawdziwa w moich przypadkach testowych.)
var coords = "50.0160001,3.2840073|50.014458,3.2778274|50.0169713,3.2750587|50.0180745,3.276742|50.0204038,3.2733474|50.0217796,3.2781737|50.0293064,3.2712542|50.0319918,3.2580816|50.0243287,3.2582281|50.0281447,3.2451177|50.0307925,3.2443178|50.0278165,3.2343882|50.0326574,3.2289809|50.0288569,3.2237612|50.0260081,3.2230589|50.0269495,3.2210104|50.0212645,3.2133541|50.0165868,3.1977592|50.0150515,3.1977341|50.0147901,3.1965286|50.0171915,3.1961636|50.0130074,3.1845098|50.0113267,3.1729483|50.0177206,3.1705726|50.0210692,3.1670394|50.0182166,3.158297|50.0207314,3.150927|50.0179787,3.1485753|50.0184944,3.1470782|50.0273077,3.149845|50.024227,3.1340514|50.0244172,3.1236235|50.0270676,3.1244474|50.0260853,3.1184879|50.0344525,3.113806";
var filteredtextCoordinatesArray = coords.split('|');
centerLatArray = [];
centerLngArray = [];
for (i=0 ; i < filteredtextCoordinatesArray.length ; i++) {
var centerCoords = filteredtextCoordinatesArray[i];
var centerCoordsArray = centerCoords.split(',');
if (isNaN(Number(centerCoordsArray[0]))) {
} else {
centerLatArray.push(Number(centerCoordsArray[0]));
}
if (isNaN(Number(centerCoordsArray[1]))) {
} else {
centerLngArray.push(Number(centerCoordsArray[1]));
}
}
var centerLatSum = centerLatArray.reduce(function(a, b) { return a + b; });
var centerLngSum = centerLngArray.reduce(function(a, b) { return a + b; });
var centerLat = centerLatSum / filteredtextCoordinatesArray.length ;
var centerLng = centerLngSum / filteredtextCoordinatesArray.length ;
console.log(centerLat);
console.log(centerLng);
var mapOpt = {
zoom:8,
center: {lat: centerLat, lng: centerLng}
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-29 08:57:15