显示工具提示

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