2012-02-11 13 views
2

私はこのコードを持っているGoogleマップAPI 3を使用して、カスタムオーバーレイ(OverlayView) よ:Googleマップ:OverlayViewをマーカー上に正確に配置する方法は?

http://jsfiddle.net/8X6cY/1/

ツールチップオーバーレイを見るためにマウスでメーカーを置くください。

マーカーの近くにツールチップポップアップ(黄色のウィンドウ)を正確に配置するにはどうすればよいですか。私のX、Yのアイデアはマップに関連しているので動作していないので、ページのレイアウトが液体であれば、私の解(X、Y)は役に立たない。

どうぞよろしくお願いします。 「右中央」、私:私はそれを更新し、作業、で削除した

google.maps.event.addListener(marker, 'mouseover', function(event) { 

    var pixel = latLngToPixel.getProjection().fromLatLngToContainerPixel(event.latLng); 

    // Grab marker position 
    var pos = [ pixel.x, pixel.y ]; 

    // Create the tooltip on a dummy div and store it on the marker 
    marker.tooltip = $('<div />').qtip({ 
     content: { 
      text: 'I\'m a replacement tooltip for the regular google one<br />New line<br /> new line<br />Newer line', 
      title: { 
       text: 'aaa', 
       button: true 
      } 
     }, 
     position: { 
      at: "right center", 
      my: "left center", 
      target: pos, 
      container: $('#map_canvas') 
     }, 
     show: { 
      ready: true, 
      event: false, 
      solo: true 
     }, 
     hide: { 
      event: 'mouseleave unfocus' 
     } 
    }); 

    }); 
} 
+0

のかなりの量を取りましたか?遅れて表示される小さなタグのように、その上にカーソルを置くと、またはアイコンをクリックしているときに発生する実際のポップアップのようなものですか? – tkone

+0

市場を動かすと、黄色のウィンドウが表示されます。それはツールチップの意味ですか? – lito

+0

どこですか? Googleのポップアップの上に直接?どうして?ポップアップをカバーしたい場合は、地図から外してカスタムオーバーレイを作成してみましょう。それともポップアップの近くに配置したいですか? – tkone

答えて

4

念のために、誰かが答えを探している、私はこれやって思い付いた:私はそれが誰かを役に立てば幸い

// getting marker x,y offset from left-top map 
var pixel = latLngToPixel.getProjection().fromLatLngToContainerPixel(event.latLng); 
// then get the map_canvas offset with jquery 
var left = $('#map_canvas').offset().left; 
var top = $('#map_canvas').offset().top; 
// x,y position tooltip 
var pos = [ pixel.x + left, pixel.y + top]; 

を、それはあなたがツールチップとはどういう意味ですか私の時間

+0

おかげで兄弟.. –

0

http://jsfiddle.net/8X6cY/2/

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て座標にアクセスすることを「左中央」、あなたがしたい希望とパイ見つかった。それがあなたを助けることを願っています。

+0

ありがとう!それは私が探しているものではありません。黄色のポップアップをマーカーの近くに配置したいと思います。問題は私のレイアウトが液体で、MAPが「任意の」位置にある可能性があることです。したがって、マップの位置によっては、X、Yアプローチは役に立たなくなります。たとえば、ボディパディングを取って500pxに変更すると、ソリューションは無駄になります。ありがとう – lito

+0

これは、ポップアップがはるかに上になるが、MAPははるかにダウンしている間、それは役に立たないです。ありがとう – lito

+1

これを見てくださいhttp://stackoverflow.com/questions/2674392/how-to-access -google-maps-api-v3-marker-div-and-its-pixel-position –

関連する問題