151

Das ist, was ich pflege mit 3 Pins/Marker eine Karte anzeigen:Google Maps API v3: Auto-Center-Plan mit mehreren Markern

<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> 

Was ich suche ein Weg, um zu vermeiden, ist zu "Manuell" finde das Zentrum der Karte mit center: new google.maps.LatLng (41.923, 12.513). Gibt es eine Möglichkeit, die Karte automatisch auf die 3 Koordinaten auszurichten?

+0

Mögliches Duplikat von [Google Maps API v3: Kann ich SETZOOM nach fitBounds] (http://stackoverflow.com/questions/ 2437683/google-maps-api-v3-kann-ich-setzoom-nach-fitbounds) –

Antwort

320

Es ist ein einfacher Weg, um eine leere LatLngBounds erstreckt statt Erstellen Sie eine explizit aus zwei Punkten. (Siehe this question für weitere Details)

etwa so aussehen sollte, hinzugefügt, um Ihren Code:

//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); 
}); 

Auf diese Weise können Sie eine beliebige Anzahl von Punkten verwenden, und müssen nicht um die Reihenfolge kennen vorher.

Demo jsFiddle hier: http://jsfiddle.net/x5R63/

+0

Danke, es funktioniert! Das einzige, was mich daran hindert, die Antwort zu akzeptieren, ist, dass die Zoomstufe nicht mehr eingehalten wird. Weißt du, wie es wieder funktioniert? :) – MultiformeIngegno

+0

@MultiformeIngegno sollte gut funktionieren, wenn Sie 'setZoom' nach' fitBounds' verwenden – metadept

+0

Oh, sah Ihre letzte Änderung. Ich werde es versuchen. :) – MultiformeIngegno

18

Ich glaube, Sie latitudine min und Länge min zu berechnen haben: Hier ein Beispiel mit der Funktion zu verwenden ist zum Zentrum Ihr Punkt:

//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) 
)); 
1

Um die genaue Mitte der Karte finden Sie übersetzen müssen die lat/lon-Koordinaten in Pixelkoordinaten und dann die Pixelzentrum finden und wandeln, die zurück in lat/lon Koordinaten .

Sie könnten die Drift nicht bemerken oder beachten, je nachdem, wie weit nördlich oder südlich des Äquators Sie sich befinden. Sie können den Drift sehen, indem Sie map.setCenter (map.getBounds(). GetCenter()) innerhalb eines setInterval ausführen, die Drift verschwindet langsam, wenn sie sich dem Äquator nähert.

Sie können das Folgende verwenden, um zwischen Breiten-/Längengrad- und Pixelkoordinaten zu übersetzen. Die Pixelkoordinaten basieren auf einer Ebene der gesamten Welt, die vollständig gezoomt ist, aber Sie können dann den Mittelpunkt davon finden und in lat/lon zurückschalten.

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; 
    } 
0

Ich verwende das obige Verfahren die Karten Grenzen zu setzen, dann stattdessen die Zoomstufe zurückzusetzen, I nur der Durchschnitt und der durchschnittlichen LAT LON berechnen und den Mittelpunkt an dieser Stelle festgelegt. Ich addiere alle lat Werte in latTotal und alle lon Werte in lototal und dividiere dann durch die Anzahl der Marker. Ich habe dann den Kartenmittelpunkt auf diese Durchschnittswerte gesetzt.

latCenter = latTotal/markercount; lonCenter = lontotal/markercount;

0

ich eine Situation, wo ich nicht alt Code ändern kann, hinzugefügt, so diese Javascript-Funktion Mittelpunkt und Zoomstufe zu berechnen:

//input 
 
var tempdata = ["18.9400|72.8200-19.1717|72.9560-28.6139|77.2090"]; 
 

 
function getCenterPosition(tempdata){ 
 
\t var tempLat = tempdata[0].split("-"); 
 
\t var latitudearray = []; 
 
\t var longitudearray = []; 
 
\t var i; 
 
\t for(i=0; i<tempLat.length;i++){ 
 
\t \t var coordinates = tempLat[i].split("|"); 
 
\t \t latitudearray.push(coordinates[0]); 
 
\t \t longitudearray.push(coordinates[1]); 
 
\t } 
 
\t latitudearray.sort(function (a, b) { return a-b; }); 
 
\t longitudearray.sort(function (a, b) { return a-b; }); 
 
\t var latdifferenece = latitudearray[latitudearray.length-1] - latitudearray[0]; 
 
\t var temp = (latdifferenece/2).toFixed(4) ; 
 
\t var latitudeMid = parseFloat(latitudearray[0]) + parseFloat(temp); 
 
\t var longidifferenece = longitudearray[longitudearray.length-1] - longitudearray[0]; 
 
\t temp = (longidifferenece/2).toFixed(4) ; 
 
\t var longitudeMid = parseFloat(longitudearray[0]) + parseFloat(temp); 
 
\t var maxdifference = (latdifferenece > longidifferenece)? latdifferenece : longidifferenece; 
 
\t var zoomvalue; \t 
 
\t if(maxdifference >= 0 && maxdifference <= 0.0037) //zoom 17 
 
\t \t zoomvalue='17'; 
 
\t else if(maxdifference > 0.0037 && maxdifference <= 0.0070) //zoom 16 
 
\t \t zoomvalue='16'; 
 
\t else if(maxdifference > 0.0070 && maxdifference <= 0.0130) //zoom 15 
 
\t \t zoomvalue='15'; 
 
\t else if(maxdifference > 0.0130 && maxdifference <= 0.0290) //zoom 14 
 
\t \t zoomvalue='14'; 
 
\t else if(maxdifference > 0.0290 && maxdifference <= 0.0550) //zoom 13 
 
\t \t zoomvalue='13'; 
 
\t else if(maxdifference > 0.0550 && maxdifference <= 0.1200) //zoom 12 
 
\t \t zoomvalue='12'; 
 
\t else if(maxdifference > 0.1200 && maxdifference <= 0.4640) //zoom 10 
 
\t \t zoomvalue='10'; 
 
\t else if(maxdifference > 0.4640 && maxdifference <= 1.8580) //zoom 8 
 
\t \t zoomvalue='8'; 
 
\t else if(maxdifference > 1.8580 && maxdifference <= 3.5310) //zoom 7 
 
\t \t zoomvalue='7'; 
 
\t else if(maxdifference > 3.5310 && maxdifference <= 7.3367) //zoom 6 
 
\t \t zoomvalue='6'; 
 
\t else if(maxdifference > 7.3367 && maxdifference <= 14.222) //zoom 5 
 
\t \t zoomvalue='5'; 
 
\t else if(maxdifference > 14.222 && maxdifference <= 28.000) //zoom 4 
 
\t \t zoomvalue='4'; 
 
\t else if(maxdifference > 28.000 && maxdifference <= 58.000) //zoom 3 
 
\t \t zoomvalue='3'; 
 
\t else 
 
\t \t zoomvalue='1'; 
 
\t return latitudeMid+'|'+longitudeMid+'|'+zoomvalue; 
 
}

+8

Ihr Code schmerzt meine Augen :) –

0

hier bei auf das mein nehmen ist Jeder stößt auf diesen Thread:

Dies hilft Schutz vor nicht-numerischen Daten zu zerstören eine Ihrer endgültigen Variablen, die lat und lng bestimmen.

Es funktioniert, indem in allen Ihren Koordinaten nehmen, sie in separate lat und lng Elemente eines Arrays Parsen, dann den Mittelwert von jeder Bestimmung. Dieser Durchschnitt soll das Zentrum sein (und hat in meinem Testfall bewahrheitet.)

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}  
    };