境界をoverlayImage googleマップと同じに設定する

Question

私は境界を設定して、overlayImagesの境界から離れないようにしています。しかし、私はここでスレッドの多くを見つけたにもかかわらず、私は間違って何をしている仕事をするように見える？

var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 40.740, lng: -74.18}, 
    zoom : 15, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var imageBounds = { 
    north: 40.773941, 
    south: 40.712216, 
    east: -74.12544, 
    west: -74.22655 
}; 
historicalOverlay = new google.maps.GroundOverlay(
'http://i.stack.imgur.com/0mgx2.jpg', 
imageBounds); 
historicalOverlay.setMap(map); 


var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.773941, -74.12544), 
    new google.maps.LatLng(40.712216, -74.22655) 
); 

// Listen for the dragend event 
google.maps.event.addListener(map, 'dragend', function() { 
    if (strictBounds.contains(map.getCenter())) return; 

    // We're out of bounds - Move the map back within the bounds 

    var c = map.getCenter(), 
     x = c.lng(), 
     y = c.lat(), 
     maxX = strictBounds.getNorthEast().lng(), 
     maxY = strictBounds.getNorthEast().lat(), 
     minX = strictBounds.getSouthWest().lng(), 
     minY = strictBounds.getSouthWest().lat(); 

    if (x < minX) x = minX; 
    if (x > maxX) x = maxX; 
    if (y < minY) y = minY; 
    if (y > maxY) y = maxY; 

    map.setCenter(new google.maps.LatLng(y, x)); 
}); 

Answer 1

google.maps.LatLngBoundsのパラメータを混在させました。第一は南西部、第二は北東部です。代わりにあなたのstrictBoundsのこれを試してみてください：

var strictBounds = new google.maps.LatLngBounds( 
    new google.maps.LatLng(imageBounds.south, imageBounds.west), 
    new google.maps.LatLng(imageBounds.north, imageBounds.east) 
); 

あなたは、マップを作成する際にはこのように、minZoomとmaxZoomパラメータを使用することができ、あまりにも多くの領域のズームアウト、またはあまりにズーム禁止したい場合は、次の

var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 40.740, lng: -74.18}, 
    zoom : 15, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    minZoom: 12, 
    maxZoom: 14 
}); 

また、私は私の意見では、それはユーザーのためのよりスムーズな体験を提供し、bounds_changed代わりのdragendを使用することをお勧めします。だから、あなたは持っているでしょう：

google.maps.event.addListener(map, 'bounds_changed', function() { ... 

最後のもの。使用しているアルゴリズムは、マップの中心がstrictBoundsからパンを外していないことを確認します。したがって、ユーザーは、画像の両側をパンするときに、基礎となる地図の一部を見ることができます。このアルゴリズムを使用すると、より良い結果は得られません（私は現在、よりよい解決策は知りません）。