web-dev-qa-db-ja.com

画像オーバーレイを正確に配置するためのGoogleマップツール？

誰かが私を正しい方向に向けてくれることを願っています。

他のさまざまなマップ要素と一緒に、XMLファイルからマーカーを読み込むGoogleマップがうまく機能しています。ただし、PNG画像を地図にオーバーレイする必要があります。

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

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

私もこのツールを使用してみました： http://www.birdtheme.org/useful/customoverlay.html -しかし、マップにアップロードされた画像のサイズを変更することはできず、クリックする機会が1つあります南西マーカー！

Google Earthを使用してPNGを完全に配置することもできますが、緯度/経度のポイントを出力する方法がわかりません。

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

google-mapsgoogle-maps-api-3overlay
21
LearnCode

アンドレディオンの説明の実際の例を次に示します。

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

私はずっと前に、クライアントのためにこの正確な問題を解決しなければなりませんでした。私の解決策は、単純に2つのマーカーを作成することでした。オーバーレイのLatLngの各LatLngBoundsに1つずつあり、移動すると、オーバーレイが更新され、LatLndBoundsがconsoleに記録され、参照できるようになります。また、マーカーをドラッグしたときに表示されるレチクル（垂直線と水平線）を追加して、オーバーレイを視覚的に配置しやすくしました。

ソリューションのコードをあなたと共有することはできませんが、OverlayView座標を LatLng を介してピクセルとの間で変換するためにMapCanvasProjectionを操作する必要があります。

あなたと同じように、エンドユーザーにはこの機能は必要なかったので、ソリューションのクエリ文字列にdebugパラメータを指定することで切り替えられる「オーサリングモード」を追加しました。

9
André Dion

私はここにあるものを使いたいです：

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

これは理想とはほど遠く、Google Mapsバージョン2 APIコードを生成しますが、それでも対数/緯度座標を使用できます。

2
bmsauer

このツールを試してください。最初のポイントで地図をダブルクリックするだけです。サイズ変更可能な長方形のボックスが表示されます。それをエンドポイントにスパンし、必要なLatLngBoundsを取得します。

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

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

1
sharic19