Google Maps V3 – So berechnen Sie die Zoomstufe für eine bestimmte Grenze

Ich suche nach einer Möglichkeit, die Zoomstufe für bestimmte Grenzen mithilfe der Google Maps V3-API zu berechnen, ähnlich wie getBoundsZoomLevel() in der V2-API.

Folgendes möchte ich tun:

// These are exact bounds previously captured from the map object
var sw = new google.maps.LatLng(42.763479, -84.338918);
var ne = new google.maps.LatLng(42.679488, -84.524313);
var bounds = new google.maps.LatLngBounds(sw, ne);
var zoom = // do some magic to calculate the zoom level

// Set the map to these exact bounds
map.setCenter(bounds.getCenter());
map.setZoom(zoom);

// NOTE: fitBounds() will not work

Leider kann ich das nicht nutzen fitBounds() Methode für meinen speziellen Anwendungsfall. Es eignet sich gut zum Einpassen von Markierungen auf der Karte, nicht jedoch zum Festlegen genauer Grenzen. Hier ist ein Beispiel dafür, warum ich das nicht verwenden kann fitBounds() Methode.

map.fitBounds(map.getBounds()); // not what you expect

Vielen Dank an Giles Gardam für seine Antwort, die sich jedoch nur auf den Längengrad und nicht auf den Breitengrad bezieht. Eine vollständige Lösung sollte die für den Breitengrad und den Längengrad erforderliche Zoomstufe berechnen und dann die kleinere (weiter entfernte) der beiden verwenden.

Hier ist eine Funktion, die sowohl Breiten- als auch Längengrad verwendet:

function getBoundsZoomLevel(bounds, mapDim) {
    var WORLD_DIM = { height: 256, width: 256 };
    var ZOOM_MAX = 21;

    function latRad(lat) {
        var sin = Math.sin(lat * Math.PI / 180);
        var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
        return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
    }

    function zoom(mapPx, worldPx, fraction) {
        return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
    }

    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();

    var latFraction = (latRad(ne.lat()) - latRad(sw.lat())) / Math.PI;

    var lngDiff = ne.lng() - sw.lng();
    var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;

    var latZoom = zoom(mapDim.height, WORLD_DIM.height, latFraction);
    var lngZoom = zoom(mapDim.width, WORLD_DIM.width, lngFraction);

    return Math.min(latZoom, lngZoom, ZOOM_MAX);
}

Demo auf jsfiddle

Parameter:

Der Parameterwert „bounds“ sollte a sein google.maps.LatLngBounds Objekt.

Der Parameterwert „mapDim“ sollte ein Objekt mit den Eigenschaften „height“ und „width“ sein, die die Höhe und Breite des DOM-Elements darstellen, das die Karte anzeigt. Möglicherweise möchten Sie diese Werte verringern, wenn Sie die Polsterung sicherstellen möchten. Das heißt, Sie möchten möglicherweise nicht, dass Kartenmarkierungen innerhalb der Grenzen zu nahe am Kartenrand liegen.

Wenn Sie die jQuery-Bibliothek verwenden, ist die mapDim Der Wert kann wie folgt ermittelt werden:

var $mapDiv = $('#mapElementId');
var mapDim = { height: $mapDiv.height(), width: $mapDiv.width() };

Wenn Sie die Prototype-Bibliothek verwenden, kann der MapDim-Wert wie folgt ermittelt werden:

var mapDim = $('mapElementId').getDimensions();

Rückgabewert:

Der Rückgabewert ist die maximale Zoomstufe, bei der noch die gesamten Grenzen angezeigt werden. Dieser Wert liegt zwischen 0 und die maximale Zoomstufe, inklusive.

Die maximale Zoomstufe beträgt 21. (Ich glaube, für Google Maps API v2 waren es nur 19.)

Erläuterung:

Google Maps verwendet eine Mercator-Projektion. In einer Mercator-Projektion haben die Längengrade den gleichen Abstand, die Breitengrade jedoch nicht. Der Abstand zwischen den Breitengraden nimmt zu, wenn sie vom Äquator zu den Polen verlaufen. Tatsächlich tendiert die Entfernung gegen Unendlich, wenn sie die Pole erreicht. Eine Google Maps-Karte zeigt jedoch keine Breitengrade über etwa 85 Grad Nord oder unter etwa -85 Grad Süd an. (Referenz) (Ich berechne den tatsächlichen Grenzwert bei +/-85,05112877980658 Grad.)

Dies macht die Berechnung der Brüche für die Grenzen für den Breitengrad komplizierter als für den Längengrad. Ich habe ein verwendet Formel aus Wikipedia um den Breitengradanteil zu berechnen. Ich gehe davon aus, dass dies mit der von Google Maps verwendeten Projektion übereinstimmt. Schließlich enthält die Google Maps-Dokumentationsseite, auf die ich oben verlinke, einen Link zu derselben Wikipedia-Seite.

Weitere Hinweise:

1. Die Zoomstufen reichen von 0 bis zur maximalen Zoomstufe. Zoomstufe 0 ist die vollständig verkleinerte Karte. Höhere Ebenen vergrößern die Karte weiter. (Referenz)
2. Bei Zoomstufe 0 kann die gesamte Welt in einer Fläche von 256 x 256 Pixeln dargestellt werden. (Referenz)
3. Mit jeder höheren Zoomstufe verdoppelt sich die Anzahl der Pixel, die zur Darstellung desselben Bereichs sowohl in der Breite als auch in der Höhe benötigt werden. (Referenz)
4. Karten werden in Längsrichtung umbrochen, jedoch nicht in Breitenrichtung.

Eine ähnliche Frage wurde in der Google-Gruppe gestellt: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/e6448fc197c3c892

Die Zoomstufen sind diskret, wobei sich der Maßstab bei jedem Schritt verdoppelt. Daher können Sie die gewünschten Grenzen im Allgemeinen nicht genau anpassen (es sei denn, Sie haben großes Glück mit der jeweiligen Kartengröße).

Ein weiteres Problem ist das Verhältnis zwischen den Seitenlängen, z. B. können Sie die Grenzen nicht genau an ein dünnes Rechteck innerhalb einer quadratischen Karte anpassen.

Es gibt keine einfache Antwort darauf, wie man genaue Grenzen einpasst, denn selbst wenn Sie bereit sind, die Größe des Kartenteils zu ändern, müssen Sie auswählen, auf welche Größe und entsprechende Zoomstufe Sie wechseln möchten (grob gesagt: Machen Sie es größer oder kleiner?). als es derzeit ist?).

Wenn Sie den Zoom wirklich berechnen müssen, anstatt ihn zu speichern, sollte dies ausreichen:

Die Mercator-Projektion verzerrt den Breitengrad, aber jeder Längengradunterschied stellt immer den gleichen Bruchteil der Breite der Karte dar (Winkelunterschied in Grad / 360). Bei Zoom Null ist die gesamte Weltkarte 256 x 256 Pixel groß und beim Zoomen jeder Stufe werden Breite und Höhe verdoppelt. Nach ein wenig Algebra können wir den Zoom also wie folgt berechnen, vorausgesetzt, wir kennen die Breite der Karte in Pixel. Beachten Sie, dass wir sicherstellen müssen, dass der Winkel positiv ist, da der Längengrad umläuft.

var GLOBE_WIDTH = 256; // a constant in Google's map projection
var west = sw.lng();
var east = ne.lng();
var angle = east - west;
if (angle < 0) {
  angle += 360;
}
var zoom = Math.round(Math.log(pixelWidth * 360 / angle / GLOBE_WIDTH) / Math.LN2);

Für Version 3 der API ist dies einfach und funktioniert:

var latlngList = [];
latlngList.push(new google.maps.LatLng(lat, lng));

var bounds = new google.maps.LatLngBounds();
latlngList.each(function(n) {
    bounds.extend(n);
});

map.setCenter(bounds.getCenter()); //or use custom center
map.fitBounds(bounds);

und einige optionale Tricks:

//remove one zoom level to ensure no marker is on the edge.
map.setZoom(map.getZoom() - 1); 

// set a minimum zoom 
// if you got only 1 marker or all markers are on the same address map will be zoomed too much.
if(map.getZoom() > 15){
    map.setZoom(15);
}

Dart-Version:

  double latRad(double lat) {
    final double sin = math.sin(lat * math.pi / 180);
    final double radX2 = math.log((1 + sin) / (1 - sin)) / 2;
    return math.max(math.min(radX2, math.pi), -math.pi) / 2;
  }

  double getMapBoundZoom(LatLngBounds bounds, double mapWidth, double mapHeight) {
    final LatLng northEast = bounds.northEast;
    final LatLng southWest = bounds.southWest;

    final double latFraction = (latRad(northEast.latitude) - latRad(southWest.latitude)) / math.pi;

    final double lngDiff = northEast.longitude - southWest.longitude;
    final double lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;

    final double latZoom = (math.log(mapHeight / 256 / latFraction) / math.ln2).floorToDouble();
    final double lngZoom = (math.log(mapWidth / 256 / lngFraction) / math.ln2).floorToDouble();

    return math.min(latZoom, lngZoom);
  }

Hier eine Kotlin-Version der Funktion:

fun getBoundsZoomLevel(bounds: LatLngBounds, mapDim: Size): Double {
        val WORLD_DIM = Size(256, 256)
        val ZOOM_MAX = 21.toDouble();

        fun latRad(lat: Double): Double {
            val sin = Math.sin(lat * Math.PI / 180);
            val radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
            return max(min(radX2, Math.PI), -Math.PI) /2
        }

        fun zoom(mapPx: Int, worldPx: Int, fraction: Double): Double {
            return floor(Math.log(mapPx / worldPx / fraction) / Math.log(2.0))
        }

        val ne = bounds.northeast;
        val sw = bounds.southwest;

        val latFraction = (latRad(ne.latitude) - latRad(sw.latitude)) / Math.PI;

        val lngDiff = ne.longitude - sw.longitude;
        val lngFraction = if (lngDiff < 0) { (lngDiff + 360) / 360 } else { (lngDiff / 360) }

        val latZoom = zoom(mapDim.height, WORLD_DIM.height, latFraction);
        val lngZoom = zoom(mapDim.width, WORLD_DIM.width, lngFraction);

        return minOf(latZoom, lngZoom, ZOOM_MAX)
    }

Keine der hoch bewerteten Antworten hat für mich funktioniert. Sie machten verschiedene undefinierte Fehler und berechneten schließlich Inf/Nan für Winkel. Ich vermute, dass sich das Verhalten von LatLngBounds im Laufe der Zeit geändert hat. Auf jeden Fall habe ich festgestellt, dass dieser Code meinen Anforderungen entspricht. Vielleicht kann er jemandem helfen:

function latRad(lat) {
  var sin = Math.sin(lat * Math.PI / 180);
  var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
  return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
}

function getZoom(lat_a, lng_a, lat_b, lng_b) {

      let latDif = Math.abs(latRad(lat_a) - latRad(lat_b))
      let lngDif = Math.abs(lng_a - lng_b)

      let latFrac = latDif / Math.PI 
      let lngFrac = lngDif / 360 

      let lngZoom = Math.log(1/latFrac) / Math.log(2)
      let latZoom = Math.log(1/lngFrac) / Math.log(2)

      return Math.min(lngZoom, latZoom)

}

Vielen Dank, das hat mir sehr dabei geholfen, den am besten geeigneten Zoomfaktor für die korrekte Darstellung einer Polylinie zu finden. Ich finde die maximalen und minimalen Koordinaten unter den Punkten, die ich verfolgen muss, und falls der Pfad sehr „vertikal“ ist, habe ich nur ein paar Codezeilen hinzugefügt:

var GLOBE_WIDTH = 256; // a constant in Google's map projection
var west = <?php echo $minLng; ?>;
var east = <?php echo $maxLng; ?>;
*var north = <?php echo $maxLat; ?>;*
*var south = <?php echo $minLat; ?>;*
var angle = east - west;
if (angle < 0) {
    angle += 360;
}
*var angle2 = north - south;*
*if (angle2 > angle) angle = angle2;*
var zoomfactor = Math.round(Math.log(960 * 360 / angle / GLOBE_WIDTH) / Math.LN2);

Eigentlich ist der ideale Zoomfaktor Zoomfaktor-1.