7

オブジェクトをマップの外から Google マップ (API V3) にドラッグしたいと考えています。いくつかの調査の後、この非常に役立つ投稿を見つけたので、それを自分のプロジェクトに適応させようとしました。

主なアイデアは、マップ上で .png 画像をドラッグし、マウス ボタンを押したときに実際の座標を取得し、その緯度/経度にマーカーを配置することです。

しかし、画像をドラッグするポイントとマーカーを配置するポイントには違いがあることに気付きました。上のリンクのサンプルでは、​​ズーム レベルに関係なく、約 10 / 15 ピクセルの違いがあります。最大ズームではあまり重要ではありませんが、ズームを解除すればするほど、ギャップが重要になります。

ギャップの図:

  • 私のウェブサイトで、緑色のマーカーを地図の外からジュネーブの近くのレマン湖の南にドラッグしようとしています: (マウスを離す前です。これはまだ私の .png 画像です)

マップ上で .png をドラッグ

  • マウスを離すと、「実際の」マーカーがここに配置されます。

実マーカーの位置

(私たちは指名手配の場所から 100 キロ/60 マイルのところにいます...)

では、なぜこのようなギャップが生じるのでしょうか。上でリンクしたサンプルでは、​​ギャップはそれほど重要ではありませんが、ギャップも存在します。ブラウザのコンソールにエラーは表示されず、CSS のトリッキーな問題ではないようです。
誰かがこの問題を修正する方法を知っていますか?

ありがとうございました

4

1 に答える 1

11

マーカー位置の計算は正確ではありません。

  1. マップのオフセットも計算内で使用する必要があります (マップがページの左上隅に配置されていない場合)
  2. デフォルトでは、マーカーのアンカーは bottom-center ですが、スクリプトはイベント引数で指定された位置を取るだけなので、イメージ内でグリップする位置によって結果が異なる場合があります。

固定機能:

$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e,ui) {
    var mOffset=$($map.getDiv()).offset();
    var point=new google.maps.Point(
        ui.offset.left-mOffset.left+(ui.helper.width()/2),
        ui.offset.top-mOffset.top+(ui.helper.height())
    );
    var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
    placeMarker(ll);
    }
});
});
于 2013-09-20T09:59:51.383 に答える