Google Maps InfoBubble pixelOffset (Déplacement de la position par défaut au-dessus du marqueur)

C'est ma solution.

Dans InfoBubble bibliothèque

remplacer

ensemble InfoBubble.prototype.draw méthode

avec

/*
* Sets InfoBubble Position
* */
InfoBubble.prototype.setBubbleOffset = function(xOffset, yOffset) {
this.bubbleOffsetX = parseInt(xOffset);
this.bubbleOffsetY = parseInt(yOffset);
}
/*
* Gets InfoBubble Position
* */
InfoBubble.prototype.getBubbleOffset = function() {
return {
x: this.bubbleOffsetX || 0,
y: this.bubbleOffsetY || 0
}
}
/**
* Draw the InfoBubble
* Implementing the OverlayView interface
*/
InfoBubble.prototype.draw = function() {
var projection = this.getProjection();
if (!projection) {
//The map projection is not ready yet so do nothing
return;
}
var latLng = /** @type {google.maps.LatLng} */ (this.get('position'));
if (!latLng) {
this.close();
return;
}
var tabHeight = 0;
if (this.activeTab_) {
tabHeight = this.activeTab_.offsetHeight;
}
var anchorHeight = this.getAnchorHeight_();
var arrowSize = this.getArrowSize_();
var arrowPosition = this.getArrowPosition_();
arrowPosition = arrowPosition / 100;
var pos = projection.fromLatLngToDivPixel(latLng);
var width = this.contentContainer_.offsetWidth;
var height = this.bubble_.offsetHeight;
if (!width) {
return;
}
//Adjust for the height of the info bubble
var top = pos.y - (height + arrowSize) + this.getBubbleOffset().y;
if (anchorHeight) {
//If there is an anchor then include the height
top -= anchorHeight;
}
var left = pos.x - (width * arrowPosition) + this.getBubbleOffset().x;
this.bubble_.style['top'] = this.px(top);
this.bubble_.style['left'] = this.px(left);
var shadowStyle = parseInt(this.get('shadowStyle'), 10);
switch (shadowStyle) {
case 1:
//Shadow is behind
this.bubbleShadow_.style['top'] = this.px(top + tabHeight - 1);
this.bubbleShadow_.style['left'] = this.px(left);
this.bubbleShadow_.style['width'] = this.px(width);
this.bubbleShadow_.style['height'] =
this.px(this.contentContainer_.offsetHeight - arrowSize);
break;
case 2:
//Shadow is below
width = width * 0.8;
if (anchorHeight) {
this.bubbleShadow_.style['top'] = this.px(pos.y);
} else {
this.bubbleShadow_.style['top'] = this.px(pos.y + arrowSize);
}
this.bubbleShadow_.style['left'] = this.px(pos.x - width * arrowPosition);
this.bubbleShadow_.style['width'] = this.px(width);
this.bubbleShadow_.style['height'] = this.px(2);
break;
}
};

et puis vous pouvez l'utiliser en

var infoBubble = new InfoBubble({
map: map,
content: "My Content",
position: new google.maps.LatLng(1, 1),
shadowStyle: 1,
padding: 0,
backgroundColor: 'transparent',
borderRadius: 7,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: true,
arrowPosition: 50,
backgroundClassName: 'infoBubbleBackground',
arrowStyle: 2
});

Puis, enfin, nous devons utiliser cette méthode setBubbleOffset(x,y); pour définir InfoBubble position

infoBubble.setBubbleOffset(0,-32);

Je viens de trouver exactement le même problème, mais ne pouvait pas trouver une réponse, n'importe où. À travers un petit essai et d'erreur, j'ai travaillé dessus.

Vous serez en utilisant Google fichier JS pour "infoBubble". Allez dans ce dossier et recherche de...

InfoBubble.prototype.buildDom_ = function() {

Pour moi, c'est sur la ligne 203 (mais qui pourrait être le résultat de la précédente, de brassage et de modifications).

Dans cette fonction vous verrez la position "absolue" de la déclaration. Sur une nouvelle ligne, vous pouvez ajouter marginTop, marginRight, marginBottom et le marginleft. Cela va pousser la bulle de sa position par défaut (qui dépend aussi de la position de la flèche de la déclaration dans votre config)...

C'est mon code tweak dans la bulle fichier JS qui des positions de la bulle sur le dessus de la borne (en raison d'une caractéristique de conception)...

var bubble = this.bubble_ = document.createElement('DIV');
bubble.style['position'] = 'absolute';
bubble.style['marginTop'] = this.px(21);
bubble.style['marginLeft'] = this.px(1);
bubble.style['zIndex'] = this.baseZIndex_;

Espère que ça aide.

Dans le InfoBubble buildDom fonction, ajouter:

bubble.className = 'bubble-container';

Maintenant, vous avez une classe CSS pour chaque InfoBubble, vous pouvez le déplacer à l'aide de CSS marge.