25

Google Maps APIのデフォルトの情報ウィンドウの代わりに、マーカーの上に他のjQueryツールチッププラグインを使用します。したがって、マーカーのDIVとそのピクセル位置を取得する必要があります。

しかし、特定のマーカーのIDまたはクラスがないため、取得できませんでした。マーカーオブジェクトと文書化されていないpixelBoundsオブジェクトからマップキャンバスdivにアクセスできるのは私だけです。

  1. マーカーのDIVにアクセスするにはどうすればよいですか？
  2. DIVのピクセル位置はどこで入手できますか？緯度位置をピクセル値に変換できますか？

==追加：

以下のコードも試してみましたが、地図をスクロールしても変わりません。

var marker = new google.maps.Marker({...});
google.maps.event.addListener(marker, 'click', function() {
    var px = this.getMap().getProjection().fromLatLngToPoint(this.getPosition());
    console.log("(" + px.x + "," + px.y + ")");
});
4

11 に答える 11

52

マーカーの特定のdivを取得したい理由がわかりません。ツールチップを表示する場合、必要なのはdiv要素ではなく、マーカーアンカーのピクセル位置（およびマーカーのサイズとアンカーの配置に関する知識）だけです。google.maps側でイベントが発生した場合、いつでも手動でツールチップの開閉をトリガーできます。

特定のマーカーのアンカーのピクセル位置を取得するには、次のコードを使用できます。

var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
    map.getBounds().getNorthEast().lat(),
    map.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
    Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
    Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);

pixelDistanceマップの左上隅から数えた特定のマーカーアンカーのオフセットを取得します（そして、map.getDiv()divからその位置を取得できます）。なぜそれがこのように機能するのか（またはより良い方法がありますか？）、グーグルマップオーバーレイのドキュメントを読むことができます。

于 2010-04-22T16:22:22.397 に答える
11 
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

var proj = overlay.getProjection();
var pos = marker.getPosition();
var p = proj.fromLatLngToContainerPixel(pos);

これで、pxとpyを介してピクセル座標にアクセスできます

追加された投稿コメントに続いて：

オーバーレイプロジェクションの欠点は、マップキャンバスの読み込みが完了するまで、初期化されないことです。次のリスナーがあり、マップの読み込みが完了したときにトリガーする必要のあるメソッドを強制します。

google.maps.event.addListener(map, 'idle', functionName());

それまでの間、描画する前にエラーを回避するために、次のチェックを使用します。

if(overlay.getProjection()) {
  // code here
}
于 2011-07-12T21:13:16.223 に答える
3

MBOのコードを使用するときに覚えておくべきことの1つは、マップタイルが繰り返されるmap.getBounds().getSouthWest()と、マップの位置に関係なく「-180」を返します。この場合に使用しているフォールバックは、左上隅ではなく中心までのピクセル距離を計算することです。これmap.getCenter()は、いずれの場合も現在の中心点を返すように見えるためです。例（jQueryを使用）：

// Calculate marker position in pixels form upper left corner
var pixelCoordsCenter = map.getProjection().fromLatLngToPoint(map.getCenter());
pixelOffset = new google.maps.Point(
    Math.floor((pixelCoordsMarker.x - pixelCoordsCenter.x) * scale + $(container).width()/2),
    Math.floor((pixelCoordsMarker.y - pixelCoordsCenter.y) * scale + $(container).height()/2)
);
于 2011-09-07T06:27:30.583 に答える
2

まだこれに対する答えを探している人は、ここを見てください：http : //code.google.com/p/google-maps-utility-library-v3/wiki/Libraries他のいくつかの便利なグーグルマップのものの中で、RichMarkerがあります。ドラッグ可能なマーカーとして、選択したDOM要素を追加します。jQueryで処理するクラス/IDを追加するだけです。

于 2012-12-13T22:43:30.490 に答える
1

MapCanvasProjectionfromLatLngToContainerPixel()は、おそらく作者が求めているものです。マップのコンテナを基準にしたピクセルオフセットが表示されます。私はいくつかの実験を行い、「最も単純な」実用的な解決策を見つけました。（Googleがこの機能をよりアクセスしやすくしたいです！）

OverlayViewまず、次のような場所のサブクラスを宣言します。

function CanvasProjectionOverlay() {}
CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
CanvasProjectionOverlay.prototype.onAdd = function(){};
CanvasProjectionOverlay.prototype.draw = function(){};
CanvasProjectionOverlay.prototype.onRemove = function(){};

次に、マップをインスタンス化するコード内の別の場所で、このOverlayViewをインスタンス化し、次のようにマップを設定します。

var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);

// Add canvas projection overlay so we can use the LatLng to pixel converter
var canvasProjectionOverlay = new CanvasProjectionOverlay();
canvasProjectionOverlay.setMap(map);

次に、を使用する必要があるときはいつでもfromLatLngToContainerPixel、これを行うだけです。

canvasProjectionOverlay.getProjection().fromLatLngToContainerPixel(myLatLng);

MapCanvasProjectionオブジェクトは、呼び出さdraw()れたとき、つまりマップの前に一度だけ使用できるidleため、ブール値の「mapInitialized」フラグを作成し、最初のマップidleコールバックでtrueに設定することをお勧めします。そして、その後にのみ必要なことを行います。

于 2011-08-10T22:29:14.217 に答える
1

Reneの答えは、「世界座標」（つまり、ズームレベルとビューポートに依存しない座標）のみを提供します。ただし、MBOの答えは正しいように思われるので、それを受け入れて投票する必要があります（登録したばかりの場合はできません）。そうしないと、解決策が見落とされがちです。

「より簡単な」バージョンについては、代わりにMapCanvasProjectionのメソッドを使用できますが、それは独自のオーバーレイを作成する必要があることを意味します。例については、こちらをご覧ください。：P

于 2010-08-22T20:18:26.327 に答える
1

さて、あなたがDIVにアクセスしなければならないなら、ここにいくつかのコードがあります。これは標準マーカー（20x34px）でのみ機能し、すべてのマーカーが検出されることに注意してください。ニーズに合わせてこのハックを改善することをお勧めします...

注意！これはハックです

var a=document.getElementById('map_canvas');
var b=a.getElementsByTagName('img');
var i, j=b.length;
for (i=0; i<j; i++) {
  if(b[i].src.match('marker_sprite.png')){
    if(b[i].style.width=='20px' && b[i].style.height=='34px') {
      c=b[i].parentElement;
      console.log(c.style.top+":"+c.style.left);
      // this is a marker's enclosing div

    }
  }
}
于 2012-05-22T06:39:10.860 に答える
0

コピー/貼り付けの準備ができている作業スニペットjQueryスタイル：

ステップ1-マップとオプションを初期化します

<html>
<head>
<script src="get-your-jQuery" type="text/javascript"></script>
<script src="get-your-maps.API" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
var bucharest = new google.maps.LatLng(44.43552, 26.10250);
var options = {
zoom: 14,
center: bucharest,
mapTypeId: google.maps.MapTypeId.ROADMAP 
}

ご覧のとおり、下の方では、変数マップの前にVARが付いていません。これは、fromLatLngToContainerPixelを取得するために別の関数を使用するため、変数マップがグローバルである必要があるためです。詳細については、クロージャを確認してください。

map = new google.maps.map($("#map_canvas")[0], options);

var marker = new google.maps.Marker({
position: google.maps.LatLng(44.4407,26.0864),
map: map
});

new google.maps.event.addListener(marker, 'mouseover', function(){
          placeMarker( marker.getPosition(),'#tooltip');//param1: latlng, param2: container to place result
});

new google.maps.event.addListener(map, 'bounds_changed', function(){
        $("#tooltip").css({display:'none'}); //this is just so you can see that all goes well ;)
    });

 overlay = new google.maps.OverlayView();
 overlay.draw = function() {};
 overlay.setMap(map);

}); //here ends jQuery.ready

function placeMarker(location, ID){
var containerPixel = overlay.getProjection().fromLatLngToContainerPixel(location);
var divPixel       = overlay.getProjection().fromLatLngToDivPixel(location);
$(ID).css({top:containerPixel.y, left:containerPixel.x, 'dislay':'block'});
}
//--> 
</script>
</head>
<body>
<div id="tooltip" style="width:100px; height:100px; position:absolute; z-index:1; background:#fff">Here I am!</div>
<div id="map_canvas" style="width:300px; height:300px"></div>
</body>
</html>
于 2012-05-28T14:35:55.607 に答える
0

カスタムアイコンを割り当て、imgsrc属性を使用して要素にアクセスするのが最も簡単であることがわかりました。デフォルトのグーグルマップアイコンを引き続き使用できます。ローカルに保存するだけです。

$("#map img[src='my_marker.png']").getBoundingClientRect();
于 2014-07-02T14:58:44.930 に答える
0

多くの状況では、計算を使用した複雑な計算と、受け入れられた回答のピン位置の変更が適切な場合があります。

私の特定の用途では、アイコンに必要なものよりもかなり大きいキャンバスを使用して、透明なPNGを作成しました。次に、透明な背景内でピンを動かして、新しい画像を地図に適用する実験を行いました。

Photoshopでピンオフセットを調整する

カスタムピン画像を追加するための仕様を例とともに示します： https ：//developers.google.com/maps/documentation/javascript/examples/icon-simple

この方法は、ズームインした場合でも、実際の異なるlong / latではなく、ピクセル単位のオフセットとして確実にスケーリングされます。

于 2016-05-06T20:02:18.343 に答える
0

この方法を試して、イベントごとにdivを取得します。

marker.addListener("click", markerClicked);

function markerClicked(event) {
    // here you can get the marker div by event.currentTarget
}
于 2020-08-15T15:14:49.750 に答える