FitBounds auf Fullscreen zoomt auf 0

Ich habe eine Karte in Div mit absoluter Position innerhalb eines Containers, die auch absolut ist. Auch die Größe der Karte wird anhand der oberen, unteren, linken und rechten CSS-Eigenschaften berechnet. Ein Klick auf Polylinie ruft fitBounds auf der Karte, und anstelle des Anbringens es zoomt auf 0FitBounds auf Fullscreen zoomt auf 0

Beispiel ist hier: fiddle (reproduse diese Situation den Vollbild-Modus gelangen, klicken Sie auf den ersten Polylinie, outzoom und klicken Sie auf den zweiten)

Irgendwelche Vorschläge, warum es passiert?

<body onload="initialize()"> 
    <div id="map_container" style="position: absolute; width: 100%; height: 100%;"> 
     <div id="map" style="position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px"> 
     </div> 
    </div> 
</body>

und js Code

var mapOptions = { 
    zoom: 7, 
    center: {lat: 52, lng: 12.5} 
} 

var firstPolylineCoordinates = [ 
    {lat: 52, lng: 12}, 
    {lat: 52, lng: 13} 
]; 

var secondPolylineCoordinates = [ 
    {lat: 51, lng: 12}, 
    {lat: 51, lng: 13} 
]; 

function initialize(){ 

    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    var bounds = new google.maps.LatLngBounds(); 

    var firstPolyline = new google.maps.Polyline({ 
     path: firstPolylineCoordinates, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 5 
    }); 
    firstPolyline.setMap(map); 
    firstPolyline.addListener("click", function(polyMouseEvent){ 
     bounds.extend(firstPolylineCoordinates[0]); 
     bounds.extend(firstPolylineCoordinates[1]); 
     map.fitBounds(bounds); 
    }); 

    var secondPolyline = new google.maps.Polyline({ 
     path: secondPolylineCoordinates, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 5 
    }); 
    secondPolyline.setMap(map); 
    secondPolyline.addListener("click", function(polyMouseEvent){ 
     bounds.extend(secondPolylineCoordinates[0]); 
     bounds.extend(secondPolylineCoordinates[1]); 
     map.fitBounds(bounds); 
    }); 
}

Quelle

2017-09-06 Meehanick

Ich bekomme Javascript-Fehler mit Ihrer Geige: 'Uncaught ReferenceError: Google ist nicht definiert. Bitte geben Sie eine [mcve] an, die Ihr Problem in der Frage selbst ** demonstriert. – geocodezip

Warum funktioniert es dann für mich? Scheint, als ob keine google maps lib enthalten ist, aber ich habe es in "externe Ressourcen" ... – Meehanick

Vergleichen Sie, was Sie mit der Dokumentation haben – geocodezip

Sie verwenden die gleichen Grenzen für die beiden Linienzug Operationen "Zoom". Wenn Sie auf die zweite Polylinie klicken, zoomen Sie bis zu den Grenzen für beide Polylinien (was nicht das ist, was Sie wollen).

Deklarieren Sie die bounds Variable innerhalb der Polylinie klicken Listener-Funktionen:

firstPolyline.addListener("click", function(polyMouseEvent){ 
    var bounds = new google.maps.LatLngBounds(); 
    bounds.extend(firstPolylineCoordinates[0]); 
    bounds.extend(firstPolylineCoordinates[1]); 
    map.fitBounds(bounds); 
});

proof of concept fiddle

Code-Schnipsel:

var mapOptions = { 
 
    zoom: 7, 
 
    center: {lat: 52, lng: 12.5} 
 
} 
 

 
var firstPolylineCoordinates = [ 
 
    {lat: 52, lng: 12}, 
 
    {lat: 52, lng: 13} 
 
]; 
 

 
var secondPolylineCoordinates = [ 
 
    {lat: 51, lng: 12}, 
 
    {lat: 51, lng: 13} 
 
]; 
 

 
function initialize() { 
 

 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 

 
    var firstPolyline = new google.maps.Polyline({ 
 
    path: firstPolylineCoordinates, 
 
    geodesic: true, 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 5 
 
    }); 
 
    firstPolyline.setMap(map); 
 
    firstPolyline.addListener("click", function(polyMouseEvent) { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    bounds.extend(firstPolylineCoordinates[0]); 
 
    bounds.extend(firstPolylineCoordinates[1]); 
 
    map.fitBounds(bounds); 
 
    }); 
 

 
    var secondPolyline = new google.maps.Polyline({ 
 
    path: secondPolylineCoordinates, 
 
    geodesic: true, 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 5 
 
    }); 
 
    secondPolyline.setMap(map); 
 
    secondPolyline.addListener("click", function(polyMouseEvent) { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    bounds.extend(secondPolylineCoordinates[0]); 
 
    bounds.extend(secondPolylineCoordinates[1]); 
 
    map.fitBounds(bounds); 
 
    }); 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 

 
<body onload="initialize()"> 
 
    <div id="map_container" style="position: absolute; width: 100%; height: 100%;"> 
 
    <div id="map" style="position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px"> 
 
    </div> 
 
    </div> 
 
</body>

Quelle

2017-09-08 13:37:34 geocodezip

Vielen Dank für Ihre Hilfe. Ich habe das Problem bereits mit _bounds_variable gefunden (lies meinen letzten Kommentar unter Hauptpost). Aber, wie ich dort sagte, ich habe kein Problem in meinem Projekt, alle Grenzen zu passen sind in neu deklarierten Var direkt vor der Anpassung. Leider kann ich meinen Fehler in der Geige nicht reproduzieren ... Wie auch immer, selbst wenn _bounds_ var mit beiden Polylinien verwendet wird, sollte es auf die Grenzen für beide Polylinien zoomen, aber nicht auf max wie es herauszoomen, sollte es nicht? – Meehanick

Hängt von den resultierenden Grenzen ab. Bitte geben Sie eine [mcve] an, die Ihr Problem in der Frage selbst ** demonstriert. Ich habe das beschriebene Problem in deiner Geige reproduziert und der obige Code hat es behoben. – geocodezip

FitBounds auf Fullscreen zoomt auf 0

Antwort

Verwandte Themen