谷歌地图可扩展覆盖

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>