Légende corrigée dans Google Maps Mashup
-
09-06-2019 - |
Question
J'ai une page avec un mashup Google Maps qui contient des punaises codées par couleur par jour (lundi, mardi, etc.). L'IFrame contenant la carte est dimensionné dynamiquement, il est donc redimensionné lorsque la fenêtre du navigateur est redimensionnée.
J'aimerais mettre une légende dans le coin de la fenêtre de la carte qui indique à l'utilisateur la signification de chaque couleur.L'API Google Maps comprend un GScreenOverlay
classe qui a le comportement que je souhaite, mais elle vous permet uniquement de spécifier une image à utiliser comme superposition, et je préférerais utiliser un DIV contenant du texte.Quelle est la manière la plus simple de positionner un DIV sur la fenêtre de la carte dans (par exemple) le coin inférieur gauche qui restera automatiquement au même endroit par rapport au coin lorsque la fenêtre du navigateur est redimensionnée ?
La solution
Vous pouvez ajouter votre propre contrôle personnalisé et l'utiliser comme légende.
Ce code ajoutera une boîte de 150 l x 100 h (bordure grise/avec fond blanc) et les mots « Hello World » à l'intérieur.Vous remplacez le texte par le HTML que vous souhaitez dans la légende.Cela restera ancré en haut à droite (G_ANCHOR_TOP_RIGHT) 10 px vers le bas et 50 px au-dessus de la carte.
function MyPane() {}
MyPane.prototype = new GControl;
MyPane.prototype.initialize = function(map) {
var me = this;
me.panel = document.createElement("div");
me.panel.style.width = "150px";
me.panel.style.height = "100px";
me.panel.style.border = "1px solid gray";
me.panel.style.background = "white";
me.panel.innerHTML = "Hello World!";
map.getContainer().appendChild(me.panel);
return me.panel;
};
MyPane.prototype.getDefaultPosition = function() {
return new GControlPosition(
G_ANCHOR_TOP_RIGHT, new GSize(10, 50));
//Should be _ and not _
};
MyPane.prototype.getPanel = function() {
return me.panel;
}
map.addControl(new MyPane());
Autres conseils
J'utiliserais du HTML comme suit :
<div id="wrapper">
<div id="map" style="width:400px;height:400px;"></div>
<div id="legend"> ... marker descriptions in here ... </div>
</div>
Vous pouvez ensuite styliser ceci pour conserver la légende en bas à droite :
div#wrapper { position: relative; }
div#legend { position: absolute; bottom: 0px; right: 0px; }
position: relative
entraînera le positionnement de tous les éléments contenus par rapport au #wrapper
conteneur, et position: absolute
provoquera le #legend
div doit être "tiré" du flux et s'asseoir au-dessus de la carte, en gardant son bord inférieur droit en bas de la #wrapper
et étirement selon les besoins pour contenir les descriptions de marqueurs.