谷歌地圖工具準確定位圖像疊加？

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