谷歌地图工具准确定位图像叠加？

Question

我希望有人能指引我走向正确的方向。

我有一个从XML文件加载标记的Google Map，以及其他各种地图元素，效果很好。不过，我现在需要将PNG图像叠加到地图上。

我已经尝试了几个小时来正确对齐网站顶部的PNG，但是找不到我需要的确切两个坐标（西南和东北）。有没有一个工具可以做到这一点？理想情况下，上传图片并拖动角落以适应，并输出您需要的两个坐标（lat/lng）？

我试过使用这个工具：http://overlay-tiler.googlecode.com/svn/trunk/upload.html - 但它有三个接触点。

我也尝试过使用这个工具：http://www.birdtheme.org/useful/customoverlay.html - 但是一旦上传到地图就不能调整图片大小，点击西南地图就有机会！

我也可以使用谷歌地球完美对齐PNG，但我看不到输出经纬度的方法。

任何意见将不胜感激。

Answer 1

不久前，我不得不为客户解决这个确切的问题。我的解决方案是简单地创建两个标记;其中每个LatLng覆盖的LatLngBounds，移动时，将更新覆盖并记录LatLndBounds到console供我参考。我还添加了在拖动标记时显示的网格线（垂直线和水平线），以便更容易在视觉上定位叠加层。

我无法与您共享解决方案中的代码，但它涉及使用OverlayView进行工作，以便通过MapCanvasProjection将LatLng坐标转换为像素以及从像素转换像素。

像你一样，我们不需要终端用户的这个功能，所以我添加了一个“创作模式”，通过为解决方案的查询字符串提供debug参数来切换。

Answer 2

试试这个工具。只需双击第一点上的地图。一个可调整大小的矩形框将出现。将其跨度到终点，并获取所需的LatLngBounds。

jsfiddle.net/yV6xv/16/embedded/result/ 

http://jsfiddle.net/yV6xv/16/embedded/result/

Answer 3

我喜欢用一个设在这里：

http://googlemapsapi.blogspot.com/2007/05/v280-making-image-overlays-easy-with.html

这是很不理想，并生成谷歌地图API第2版的代码，但你仍然可以使用纬度/纬度坐标。

Answer 4

继承人是AndréDion的解释的实例。

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

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

    console.log(map); 
    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.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_; 
    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'; 
}; 


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

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

initialize();