顯示工具提示

Question

我有以下的谷歌地圖測試：http://jsfiddle.net/gM6Z6/

正如你可以看到它得到你的位置，然後顯示它使用三個標記在地圖上。

我想要做的就是當用戶將鼠標懸停在任何三個標記的，我想旁邊的標誌頭像顯示以下提示：

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

我不知道怎麼做最好這個，因爲我需要這個爲所有三個標記工作，並且不管哪個標記被徘徊而處於相同的位置。 它應該總是出現在下面的foursquare屏幕截圖旁邊，但是應該根據屏幕上圖標的位置左右移動以使其適合。

誰能幫助？由於文檔有點模糊，我喜歡這個...我可以創建工具提示，但我很困惑如何最好地顯示所有三個標記，但在相同的位置和視口意識。

Answer 1

你可以使用鼠標懸停事件來顯示你的提示。 （參見事件文檔here）。您只需要爲marker2顯示它，因爲它具有最高的zIndex值。

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

Here's一個的jsfiddle顯示使用InfoWindow的工具提示。您的示例中沒有工具提示代碼。你可以使用你創建的工具提示更新你的例子嗎？

Answer 2

在這裏你去：

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

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

定製通過CSS。

UPDATE

註釋的代碼： http://jsfiddle.net/nickaknudson/KVa2d/12/

UPDATE 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; 
    } 
}); 

UPDATE 3

更好的定位使用outerWidth（）和outerHeight（）取邊界等考慮在內。刪除陰影div。

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

//======================== 
// 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; 
    } 
});​ 

資源

• modified from my GoogleMapsiPhoneWindow