2012-07-24 170 views
6

我有以下的谷歌地圖測試:http://jsfiddle.net/gM6Z6/顯示工具提示

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

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

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

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

enter image description here

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

+0

任何更新這個好嗎?謝謝。 – Cameron 2012-07-25 11:09:20

+0

爲什麼不讓透明背景的標記變大? (谷歌知道你的標記的大小應該使它適合)如果你的頭像是動態的這可能不會工作 – turtlepick 2012-07-27 01:02:44

+1

請更新你的小提琴以包括你當前的工具提示代碼。 'Tooltip'不是API的一部分,也沒有說明它是如何實現的。 – 2012-07-30 07:22:48

回答

2

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

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

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

+0

這很酷,但我不想使用InfoWindow,因爲它過於複雜,因爲我想在這裏。我想要的只是創建一個簡單的工具提示,然後我可以使用CSS進行設計,使其看起來像我在屏幕截圖中顯示的內容。再次感謝您的幫助。 – Cameron 2012-07-27 15:08:30

+0

是的,這就是爲什麼我要求你用你說的可以創建的工具提示更新示例,以便我們能夠繼續前進 – 2012-07-28 01:23:00

+0

嗨,我從未創建過一個。我所做的只是編寫代碼,因爲我認爲這是如何完成的。無論如何,我將如何創建一個可以使用CSS進行編輯的簡單提示,並且可以識別視口。乾杯。 – Cameron 2012-07-31 18:51:03

8

在這裏你去:

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

資源

+0

很多簡單的代碼...你確定這是必要的嗎?儘管感謝代碼。會有興趣看看這是否可以簡化。乾杯 – Cameron 2012-07-31 18:49:59

+0

刪除了不必要的代碼,如CoffeeScript生成的代碼。如果你不想要陰影效果,會更簡單嗎? – nickaknudson 2012-07-31 23:31:27

+1

是的,我也不明白你爲什麼會陷入低谷。從我+1。 – 2012-08-02 00:03:54