イメージオーバーレイを正確に配置するためのGoogleマップツールですか？

Question

私は誰かが私を正しい方向に向けることを望んでいます。

XMLファイルのマーカーを読み込むGoogleマップと他のさまざまなマップ要素がうまくいきます。しかし、私は今マップにPNG画像をオーバーレイする必要があります。

PNGをサイトの上部に正しく配置するために何時間も努力しましたが、私が必要とする正確な2つの座標（南西と北東）は見つかりませんでした。これを行うためのツールはありますか？理想的には、画像をアップロードし、コーナーをフィットさせるようにドラッグすると、必要な2つの座標（緯度/経度）が出力されます。

私はこのツールを試してみました：http://overlay-tiler.googlecode.com/svn/trunk/upload.html - しかし3つの接点があります。

私はこのツールを使ってみました：http://www.birdtheme.org/useful/customoverlay.html - マップにアップロードした画像のサイズを変更することはできません。南西のマーカーをクリックすることでチャンスが得られます！

Google Earthを使ってPNGを完全に整列させることもできますが、緯度/経度の出力方法はわかりません。

アドバイスをいただければ幸いです。

Answer 1

私はずっと前にクライアントのこの厳密な問題を解決しなければなりませんでした。私の解決策は単純に2つのマーカーを作成することでした。オーバーレイのについては、LatLngのそれぞれに1つずつ、オーバーレイを更新してLatLndBoundsをconsoleに記録して参照してください。また、マーカーをドラッグしたときに表示される網目（縦線と横線）を追加して、オーバーレイを視覚的に配置しやすくしました。

解決策のコードを共有することはできませんが、MapCanvasProjectionを経由してLatLngの座標をピクセルとの間で変換するには、OverlayViewで作業する必要があります。

私たちはエンドユーザー向けにこの機能を必要としませんでしたので、ソリューションのクエリ文字列に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

それは理想からかけ離れだし、それはGoogleマップのバージョン2 APIのコードを生成していますが、まだ使用することができます緯度/経度座標。

Answer 4

アンドレ・ディオンの説明の実例。

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