Googleマップのパン境界を画像オーバーレイと同じに設定する

Question

オーバーレイ画像を超えないように境界を設定しようとしていますが、imageBoundsに正しく設定しても境界線を超えているようですビット。正しい境界をどのように計算できますか？

var currentMarker; 
 

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

 
    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.712216, -74.22655), 
 
    new google.maps.LatLng(40.773941, -74.12544) 
 
); 
 

 
    // Listen for the dragend event 
 
    google.maps.event.addListener(map, 'bounds_changed', 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)); 
 
    });

#mapContainer { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    margin-bottom: 0px; 
 
    margin-top: 0px; 
 
    position: relative; 
 

 
} 
 

 
#map { 
 
    height: 100%; 
 
} 
 

 
html, body { 
 
    height:100%; 
 
    width: 100%; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    margin-bottom: 0px; 
 
    margin-top: 0px; 
 
    overflow:hidden; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<div id="mapContainer"> 
 

 
    <div id="map"></div> 
 
</div>

Answer 1

あなたは、画像の境界に内部のブラウザビューポートのエッジを維持するために必要な境界を計算する必要があります。

新しい "厳密な"境界は、ビューポートの高さの半分と両側のビューポートの幅の半分だけ縮小されたイメージの境界として計算されます。 MapCanvasProjectionクラスのfromLatLngToContainerPixelとfromLatLngToContainerPixelメソッドを使用します。

var windowWidth = window.innerWidth || d.documentElement.clientWidth || d.getElementsByTagName('body')[0].clientWidth; 
var windowHeight = window.innerHeight || d.documentElement.clientHeight || d.getElementsByTagName('body')[0].clientHeight; 

// calculate the new SW corner 
var newSWpt = overlay.getProjection().fromLatLngToContainerPixel(strictBounds.getSouthWest()); 
newSWpt = new google.maps.Point((newSWpt.x + (windowWidth/2)), (newSWpt.y - (windowHeight/2))); 
var newSW = overlay.getProjection().fromContainerPixelToLatLng(newSWpt); 

// calculate the new NE corner 
var newNEpt = overlay.getProjection().fromLatLngToContainerPixel(strictBounds.getNorthEast()); 
newNEpt = new google.maps.Point((newNEpt.x - (windowWidth/2)), (newNEpt.y + (windowHeight/2))); 
var newNE = overlay.getProjection().fromContainerPixelToLatLng(newNEpt); 
var newStrictBounds = new google.maps.LatLngBounds(newSW, newNE); 

注：そこにドラッグするにはいくつかの慣性があるので、マップはまだ境界の上にわずかにドラッグすることができ、それが限界に戻ります。

コードスニペット：

var currentMarker; 
 

 
var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
    lat: 40.740, 
 
    lng: -74.18 
 
    }, 
 
    zoom: 15, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    minZoom: 15, 
 
    maxZoom: 15 
 
}); 
 
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 overlay = new google.maps.OverlayView(); 
 
overlay.draw = function() {}; 
 
overlay.setMap(map); 
 

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

 
// Listen for the dragend event 
 
google.maps.event.addListener(map, 'bounds_changed', function() { 
 

 
    var windowWidth = window.innerWidth || d.documentElement.clientWidth || d.getElementsByTagName('body')[0].clientWidth; 
 
    var windowHeight = window.innerHeight || d.documentElement.clientHeight || d.getElementsByTagName('body')[0].clientHeight; 
 

 
    var newSWpt = overlay.getProjection().fromLatLngToContainerPixel(strictBounds.getSouthWest()); 
 
    newSWpt = new google.maps.Point((newSWpt.x + (windowWidth/2)), (newSWpt.y - (windowHeight/2))); 
 
    var newSW = overlay.getProjection().fromContainerPixelToLatLng(newSWpt); 
 
    var newNEpt = overlay.getProjection().fromLatLngToContainerPixel(strictBounds.getNorthEast()); 
 
    newNEpt = new google.maps.Point((newNEpt.x - (windowWidth/2)), (newNEpt.y + (windowHeight/2))); 
 
    var newNE = overlay.getProjection().fromContainerPixelToLatLng(newNEpt); 
 
    var newStrictBounds = new google.maps.LatLngBounds(newSW, newNE); 
 

 
    if (newStrictBounds.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 = newStrictBounds.getNorthEast().lng(), 
 
    maxY = newStrictBounds.getNorthEast().lat(), 
 
    minX = newStrictBounds.getSouthWest().lng(), 
 
    minY = newStrictBounds.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)); 
 
});

#mapContainer { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    margin-bottom: 0px; 
 
    margin-top: 0px; 
 
    position: relative; 
 
} 
 
#map { 
 
    height: 100%; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    margin-bottom: 0px; 
 
    margin-top: 0px; 
 
    overflow: hidden; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<div id="mapContainer"> 
 

 
    <div id="map"></div> 
 
</div>