全屏縮放FitBounds縮小爲0

我有一個絕對位置在絕對位置的絕對位置的容器，也是絕對位置。此外地圖的大小是從頂部，底部，左側和右側的CSS屬性計算得出的。點擊折線呼籲地圖fitBounds，而是安裝它縮小到0全屏縮放FitBounds縮小爲0

例子是在這裏：fiddle（以reproduse這種情況下進入全屏模式，點擊第一折線，outzoom並點擊第二）

任何建議爲什麼發生這種情況？

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

和JS代碼

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

來源

2017-09-06 Meehanick

我得到你的小提琴javascript錯誤：'未捕獲的ReferenceError：谷歌沒有定義'。請提供一個[mcve]，在問題本身**中演示您的問題**。 – geocodezip

爲什麼它適合我呢？似乎沒有谷歌地圖庫包括在內，但我有「外部資源」... – Meehanick

比較你與文檔 – geocodezip

您正在使用相同的邊界兩個折線「放大」操作。當你點擊第二條折線時，最終會縮小到兩條折線的邊界（這不是你想要的）。

聲明折線點擊監聽功能內部的bounds變量：

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

代碼片斷：

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>

來源

2017-09-08 13:37:34 geocodezip

謝謝你的幫助。我已經發現_bounds_變量的問題（請閱讀我在主帖子下的最新評論）。但是，正如我在那裏所說的那樣，我的項目中沒有這樣的問題，所有適合的界限都在新的聲明var中，恰好在擬合之前。不幸的是，我不能重現我的bug ... 無論如何，即使_bounds_ var與兩條多段線一起使用，它應該縮放到兩個多段線的邊界，但不會縮小到最大像它一樣，不是嗎？ – Meehanick

取決於產生的邊界。請提供一個[mcve]，在問題本身**中演示您的問題**。我在你的小提琴中重現了上述問題，上面的代碼修復了它。 – geocodezip

全屏縮放FitBounds縮小爲0

回答

相關問題