8

次の Google マップ テストがあります: http://jsfiddle.net/gM6Z6/

ご覧のとおり、位置を取得し、3 つのマーカーを使用して地図上に表示します。

私がやりたいことは、ユーザーが 3 つのマーカーのいずれかにカーソルを合わせたときに、次のツールチップをマーカー アバターの NEXT に表示することです。

var tooltipOptions={
    marker:marker,
    content: "You're here!",
    cssClass:'tooltip'
};
var tooltip = new Tooltip(tooltipOptions);

3 つのマーカーすべてでこれが機能し、どのマーカーがホバーされたかに関係なく同じ位置にある必要があるため、これを行う最善の方法がわかりません。下のフォースクエアのスクリーンショットのように常にアバターの横に表示されますが、アイコンが収まるように画面上のアイコンの位置に応じて左または右に移動する必要があります。

ここに画像の説明を入力

誰でも助けることができますか？ドキュメントは私の好みに合わせて少しあいまいなので...ツールチップを作成できますが、3つのマーカーすべてに対して表示するのに最適な方法を混乱させていますが、同じ位置とビューポートを認識しています。

4

2 に答える 2

9

どうぞ：

http://jsfiddle.net/nickaknudson/KVa2d/

tooltip = new Tooltip("text");
...
tooltip.open(map, marker);

CSSでカスタマイズ可能。

アップデート

コメント付きコード: http://jsfiddle.net/nickaknudson/KVa2d/12/

更新 2

不要なビットを削除: http://jsfiddle.net/nickaknudson/KVa2d/14/

//========================
// Tooltip Class Definition
//   extends OverlayView:
//   https://developers.google.com/maps/documentation/javascript/reference#OverlayView
//========================
var Tooltip
Tooltip = function(tip) {
    this.tip = tip;
    this.buildDOM();
};

$.extend(Tooltip.prototype, google.maps.OverlayView.prototype, {

    // build the DOM
    buildDOM: function() {
        // Body DIV
        this.bdiv = $("<div></div>").addClass('WindowBody').html(this.tip);
        // Window DIV
        this.wdiv = $("<div></div>").addClass('Window').append(this.bdiv);
        // Shadow DIV
        this.sdiv = $("<div></div>").addClass('WindowShadow');
        // Start Closed
        this.close();
    },

    // API - onAdd
    onAdd: function() {
        $(this.getPanes().floatPane).append(this.wdiv);
        $(this.getPanes().floatShadow).append(this.sdiv);
    },

    // API - onRemove
    onRemove: function() {
        this.wdiv.detach();
        this.sdiv.detach();

    },

    // API - draw
    draw: function() {
        var pos, left, top;
        // projection is accessible?
        if (!this.getProjection()) return;
        // position is accessible?
        if (!this.get('position')) return;
        // convert projection
        pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
        // top offset
        top = pos.y - this.getAnchorHeight() / 2;
        // left offset
        if (this.getMap().getCenter().lng() > this.get('position').lng()) {
            left = pos.x + this.wdiv.width() * 0.5;
        } else {
            left = pos.x - this.wdiv.width() * 1.5;
        }
        // window position
        this.wdiv.css('top', top);
        this.wdiv.css('left', left);
        // shadow position
        this.sdiv.css('top', (top - this.getAnchorHeight() / 2));
        this.sdiv.css('left', left);
        // shadow size
        this.sdiv.width(this.wdiv.width());
        this.sdiv.height(this.wdiv.height());
    },

    // open Tooltip
    open: function(map, anchor) {
        // bind to map
        if (map) this.setMap(map);
        // bind to anchor
        if (anchor) {
            this.set('anchor', anchor);
            this.bindTo('anchorPoint', anchor);
            this.bindTo('position', anchor);
        }
        // need to force redraw otherwise it will decide to draw after we show the Tooltip                    
        this.draw();
        // show tooltip
        this.wdiv.show();
        this.sdiv.show();
        // set property
        this.isOpen = true;
    },

    // close Tooltip
    close: function() {
        // hide tooltip
        this.wdiv.hide();
        this.sdiv.hide();
        // set property
        this.isOpen = false;
    },

    // correctly get the anchorPoint height
    getAnchorHeight: function() {
        // See: https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
        //   "The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow."
        return -1 * this.get('anchorPoint').y;
    }
});

更新 3

境界線などを考慮して、outerWidth() と outerHeight() を使用して配置を改善しました。シャドウ div を削除しました。

http://jsfiddle.net/nickaknudson/KVa2d/16/ </p> 

//========================
// Tooltip Class Definition
//   extends OverlayView:
//   https://developers.google.com/maps/documentation/javascript/reference#OverlayView
//========================
var Tooltip
Tooltip = function(tip) {
    this.tip = tip;
    this.buildDOM();
};

$.extend(Tooltip.prototype, google.maps.OverlayView.prototype, {

    // build the DOM
    buildDOM: function() {
        // Window DIV
        this.wdiv = $("<div></div>").addClass('Window').append(this.tip);
        // Start Closed
        this.close();
    },

    // API - onAdd
    onAdd: function() {
        $(this.getPanes().floatPane).append(this.wdiv);
    },

    // API - onRemove
    onRemove: function() {
        this.wdiv.detach();
    },

    // API - draw
    draw: function() {
        var pos, left, top;
        // projection is accessible?
        if (!this.getProjection()) return;
        // position is accessible?
        if (!this.get('position')) return;
        // convert projection
        pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
        // top offset
        top = pos.y - this.getAnchorHeight() / 2 - this.wdiv.outerHeight()/2;
        // left offset
        if (this.getMap().getCenter().lng() > this.get('position').lng()) {
            left = pos.x + this.wdiv.outerWidth() * 0.3;
        } else {
            left = pos.x - this.wdiv.outerWidth() * 1.3;
        }
        // window position
        this.wdiv.css('top', top);
        this.wdiv.css('left', left);
    },

    // open Tooltip
    open: function(map, anchor) {
        // bind to map
        if (map) this.setMap(map);
        // bind to anchor
        if (anchor) {
            this.set('anchor', anchor);
            this.bindTo('anchorPoint', anchor);
            this.bindTo('position', anchor);
        }
        // need to force redraw otherwise it will decide to draw after we show the Tooltip                    
        this.draw();
        // show tooltip
        this.wdiv.show();
        // set property
        this.isOpen = true;
    },

    // close Tooltip
    close: function() {
        // hide tooltip
        this.wdiv.hide();
        // set property
        this.isOpen = false;
    },

    // correctly get the anchorPoint height
    getAnchorHeight: function() {
        // See: https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
        //   "The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow."
        return -1 * this.get('anchorPoint').y;
    }
});​

資力

于 2012-07-27T17:35:37.343 に答える
2

mouseover イベントを使用して、ツールチップを表示できます。(ここでイベントのドキュメントを参照してください)。zIndex 値が最も高いため、marker2 についてのみ表示する必要があります。

google.maps.event.addListener(marker2, 'mouseout', function() {
});

InfoWindowを使用してツールチップを表示する jsFiddle を次に示します。あなたの例にはツールチップのコードがありません。作成したツールチップを使用して例を更新できますか?

于 2012-07-27T00:39:27.483 に答える