Googleマップのスケーラブルなオーバーレイ

Question

私はカスタムマップオーバーレイのため、このスニペットを使用します。

http://jsfiddle.net/4cWCW/3/

私は、これは一部だと思うが、それを変更することであった：

DebugOverlay.prototype.draw = function() { 
    var overlayProjection = this.getProjection(); 
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); 
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); 
    var div = this.div_; 
    div.style.left = sw.x + 'px'; 
    div.style.top = ne.y + 'px'; 
    div.style.width = (ne.x - sw.x) + 'px'; 
    div.style.height = (sw.y - ne.y) + 'px'; 
}; 

私は側面を保持する必要がありますスケーリングしながらの画像の比率。

すべてのアイデア？

おかげ

Answer 1

1. 今まであなたが最高のユーザーエクスペリエンスを提供します感じる画像
2. 規模適切な新しい幅の比（またはその逆もする新しい高さの元の高さと幅を取得）。

var origHeight = this.img.naturalHeight; 
    var origWidth = this.img.naturalWidth; 
    div.style.left = sw.x + 'px'; 
    div.style.top = ne.y + 'px'; 
    div.style.width = (ne.x - sw.x) + 'px'; 
    div.style.height = (ne.x - sw.x) * origWidth/origWidth + 'px'; 

proof of concept fiddle

コードスニペット：

var overlay; 
 

 
DebugOverlay.prototype = new google.maps.OverlayView(); 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    zoom: 15, 
 
    center: new google.maps.LatLng(40.743388, -74.007592) 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    var swBound = new google.maps.LatLng(40.73660837340877, -74.01852328); 
 
    var neBound = new google.maps.LatLng(40.75214181, -73.99661518216243); 
 
    var bounds = new google.maps.LatLngBounds(swBound, neBound); 
 

 
    var srcImage = 'http://robincwillis.com/top/splash/04.jpg'; 
 

 
    overlay = new DebugOverlay(bounds, srcImage, map); 
 

 
    var markerA = new google.maps.Marker({ 
 
    position: swBound, 
 
    map: map, 
 
    draggable: true 
 
    }); 
 

 
    var markerB = new google.maps.Marker({ 
 
    position: neBound, 
 
    map: map, 
 
    draggable: true 
 
    }); 
 

 
    google.maps.event.addListener(markerA, 'drag', function() { 
 

 
    var newPointA = markerA.getPosition(); 
 
    var newPointB = markerB.getPosition(); 
 
    var newBounds = new google.maps.LatLngBounds(newPointA, newPointB); 
 
    overlay.updateBounds(newBounds); 
 
    }); 
 

 
    google.maps.event.addListener(markerB, 'drag', function() { 
 

 
    var newPointA = markerA.getPosition(); 
 
    var newPointB = markerB.getPosition(); 
 
    var newBounds = new google.maps.LatLngBounds(newPointA, newPointB); 
 
    overlay.updateBounds(newBounds); 
 
    }); 
 

 
    google.maps.event.addListener(markerA, 'dragend', function() { 
 

 
    var newPointA = markerA.getPosition(); 
 
    var newPointB = markerB.getPosition(); 
 
    console.log("point1" + newPointA); 
 
    console.log("point2" + newPointB); 
 
    }); 
 

 
    google.maps.event.addListener(markerB, 'dragend', function() { 
 
    var newPointA = markerA.getPosition(); 
 
    var newPointB = markerB.getPosition(); 
 
    console.log("point1" + newPointA); 
 
    console.log("point2" + newPointB); 
 
    }); 
 

 
} 
 

 
function DebugOverlay(bounds, image, map) { 
 

 
    this.bounds_ = bounds; 
 
    this.image_ = image; 
 
    this.map_ = map; 
 
    this.div_ = null; 
 
    this.setMap(map); 
 
} 
 

 
DebugOverlay.prototype.onAdd = function() { 
 

 
    var div = document.createElement('div'); 
 
    div.style.borderStyle = 'none'; 
 
    div.style.borderWidth = '0px'; 
 
    div.style.position = 'absolute'; 
 
    var img = document.createElement('img'); 
 
    img.src = this.image_; 
 
    img.style.width = '100%'; 
 
    img.style.height = '100%'; 
 
    img.style.opacity = '0.5'; 
 
    img.style.position = 'absolute'; 
 
    div.appendChild(img); 
 
    this.img = img; 
 
    that = this; 
 
    this.img.onload = function() { 
 
    console.log("onload: img width=" + this.width + ' height=' + this.height); 
 
    that.draw(); 
 
    } 
 
    this.div_ = div; 
 
    var panes = this.getPanes(); 
 
    panes.overlayLayer.appendChild(div); 
 
}; 
 

 
DebugOverlay.prototype.draw = function() { 
 
    var overlayProjection = this.getProjection(); 
 
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); 
 
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); 
 
    var div = this.div_; 
 
    var origHeight = this.img.naturalHeight; 
 
    var origWidth = this.img.naturalWidth; 
 
    console.log("oH=" + origHeight + " oW=" + origWidth + " ratio=" + origWidth/origWidth); 
 
    div.style.left = sw.x + 'px'; 
 
    div.style.top = ne.y + 'px'; 
 
    div.style.width = (ne.x - sw.x) + 'px'; 
 
    div.style.height = ((ne.x - sw.x) * (origWidth/origWidth)) + 'px'; 
 
    console.log("width=" + div.style.width + " height=" + div.style.height); 
 
    // div.style.height = (sw.y - ne.y) + 'px'; 
 
}; 
 

 

 
DebugOverlay.prototype.updateBounds = function(bounds) { 
 
    this.bounds_ = bounds; 
 
    this.draw(); 
 
}; 
 

 
DebugOverlay.prototype.onRemove = function() { 
 
    this.div_.parentNode.removeChild(this.div_); 
 
    this.div_ = null; 
 
}; 
 

 
initialize(); 
 
//google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>