Mostrar información sobre herramientas en vuelo estacionario del marcador de encargo

Question

Tengo el siguiente mapa de Google prueba: http://jsfiddle.net/gM6Z6/

Como se puede ver que se pone a su posición y luego se muestra en el mapa utilizando tres marcadores.

Lo que quiero hacer es cuando un usuario se desplaza sobre cualquiera de los tres marcadores, quiero mostrar la siguiente información sobre herramientas SIG para el avatar marcador:

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

No estoy seguro de cómo hacerlo mejor esto, ya que necesito que esto funcione para los tres marcadores, y estar en la misma posición, independientemente de qué marcador esté suspendido. SIEMPRE debe aparecer al lado del avatar como en la captura de pantalla cuadrangular a continuación PERO debe moverse hacia la izquierda o hacia la derecha dependiendo de la posición del icono en la pantalla para permitir que encaje.

¿Alguien puede ayudar? Como los documentos son un poco vagos para mi gusto en esto ... puedo crear la información sobre herramientas, pero estoy confundido sobre la mejor manera de mostrarlo para los tres marcadores, pero en la misma posición y en la misma ventana.

Answer 1

Puede usar el evento mouseover para mostrar su información sobre herramientas. (Consulte el documento de eventos here). Solo necesita mostrarlo para el marcador 2 ya que tiene el valor más alto de zIndex.

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

Here's un jsFiddle que muestra un texto de ayuda utilizando InfoWindow. No tiene el código de información sobre herramientas en su ejemplo. ¿Puedes actualizar tu ejemplo usando la información sobre herramientas que creaste?

Answer 2

Aquí van:

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

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

personalizable a través de CSS.

ACTUALIZACIÓN

código comentado: http://jsfiddle.net/nickaknudson/KVa2d/12/

ACTUALIZACIÓN 2

eliminados los bits innecesarios: 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; 
    } 
}); 

ACTUALIZACIÓN 3

Mejor posicionamiento usando outerWidth() y outerHeight() para tomar fronteras etc en cuenta. Eliminado shadow 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; 
    } 
});​ 

RECURSOS

• modified from my GoogleMapsiPhoneWindow