20

マウスがマーカーの上にあるときにdivで作成したツールチップを配置したいのですが、画面の位置を取得してdivを正しい位置に配置する方法がわかりません。これが私のコードです:

google.maps.event.addListener(marker, "mouseover", function() {
            divover.css("left", marker.get("left"));
            divover.css("top", marker.get("top"));
            divover.css("display", "block");
});

google.maps.event.addListener(marker, "mouseout", function() {
            divover.css("display", "none");
});

明らかに get メソッドは失敗します。何か案が？

4

7 に答える 7

18

これはトリッキーです。API の v2 では、次のことができます。

map.fromLatLngToContainerPixel(marker.getLatLng(), zoomLevel);

v3 では、メソッド fromLatLngToContainerPixel が MapCanvasProjection オブジェクトに移動されました。MapCanvasProjection オブジェクトを取得するには、OverlayView オブジェクトで getProjection を呼び出す必要があります。Marker クラスは OverlayView から拡張されたように見えますが、残念ながら getProjection メソッドはありません。理由はわかりません - バグを報告する価値があるかもしれません。

私が行った方法は、OverlayView に基づいて独自のカスタム マーカー クラスを作成することです。そのため、まだ getProjection メソッドがあります。

var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);

カスタム オーバーレイに関する Google のチュートリアルを読んだり、その例をコピーして開始したりできます。

于 2010-04-28T07:20:27.787 に答える
10

Google Maps API V3のツールチップを作成する方法について作成したチュートリアルへのリンクは次のとおりです。http：//medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps-javascript -api-v3 / 動作を確認するには、こちらにアクセスしてくださいhttp://medelbou.com/demos/google-maps-tooltip/

于 2012-02-03T03:21:46.240 に答える
5

infowindowこの問題を解決するために設計されています。 http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

于 2011-11-04T14:01:24.223 に答える
4

どういうわけか、他の答えはどれもうまくいかなかったか、実装したくありませんでした（たとえば、独自のカスタム Marker クラスを作成します）。

さらに検索した後、私はこの解決策を見つけましたが、それはまさに必要なことを行います:

function latlngToPoint(map, latLng) {
    var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
    var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
    var scale = Math.pow(2, map.getZoom());
    var worldPoint = map.getProjection().fromLatLngToPoint(latLng);
    var point = new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);
    return point;
}

次に、電話var position = latlngToPoint(map, marker.getPosition());して、心ゆくまでその位置を使用してください:-)

于 2013-04-24T21:29:17.113 に答える
1

ここの方法を使用してマップをドラッグした後、またはダミーのオーバーレイビューを作成してその投影を使用した後、投影を更新するのに問題がありました。私はここで私のために100％機能する解決策を見つけました：http：//qfox.nl/notes/116

/**
* @param {google.maps.Map} map
* @param {google.maps.LatLng} latlng
* @param {int} z
* @return {google.maps.Point}
*/
var latlngToPoint = function(map, latlng, z){
    var normalizedPoint = map.getProjection().fromLatLngToPoint(latlng); // returns x,y normalized to 0~255
    var scale = Math.pow(2, z);
    var pixelCoordinate = new google.maps.Point(normalizedPoint.x * scale, normalizedPoint.y * scale);
    return pixelCoordinate; 
};
/**
* @param {google.maps.Map} map
* @param {google.maps.Point} point
* @param {int} z
* @return {google.maps.LatLng}
*/
var pointToLatlng = function(map, point, z){
    var scale = Math.pow(2, z);
    var normalizedPoint = new google.maps.Point(point.x / scale, point.y / scale);
    var latlng = map.getProjection().fromPointToLatLng(normalizedPoint);
    return latlng; 
};
于 2011-09-09T19:59:46.320 に答える
0

別の投稿で解決策を見つけました：

var point = gmap.getProjection().fromLatLngToPoint(marker.getPosition())
于 2010-10-06T18:52:54.410 に答える