Google Maps API V3 de contrôles personnalisés position
J'ai lu des docs sur le positionnement des contrôles sur la carte(TOP
, TOP_LEFT
, etc), mais Est-il un moyen de le rendre personnalisé position? Par exemple: left: 20px; top: 200px
;
Je veux juste que dans top_left coin de mon logo et de contrôle du zoom à droite sous le logo.
Et comment enlever la casserole de contrôle dans les contrôles de navigation? Je veux avoir seulement la commande de zoom dans le style par défaut(non réduite).
Merci.
Vous devez vous connecter pour publier un commentaire.
Bien que la question est plutôt vieux, avec près de 3k points de vue, il semble toujours attirer l'intérêt - et Donc, voici ma solution:
Envelopper les commandes!
Nous devons d'abord trouver le conteneur de l'élément, où Google met le contrôle. Cela dépend de contrôles que nous voulons utiliser sur la carte. Google n'autorise pas l'utilisation des identifiants uniques pour les conteneurs. Mais tous les contrôles ont la classe "gmnoprint" en commun. Donc, juste en comptant les éléments avec "gmnoprint" fait le job. Dire que nous n'avons souhaitez utiliser le "ZoomControlStyle.Les PETITS"-contrôle. C'est toujours le dernier élément avec "gmnoprint".
Maintenant, nous ne pouvons tout simplement le style de l'élément de Droite? Pas de. Dès que vous effectuez un zoom avant ou redimensionner la carte, Google réinitialise le style des contrôles. La malchance, mais: On peut encapsuler un conteneur à travers le contrôle et le style de ce conteneur!
À l'aide de jQuery, c'est vraiment une tâche simple:
Nous n'avons qu'à faire bien sûr, le contrôle est entièrement chargé par le temps, nous essayons pour l'envelopper. Il n'est pas totalement à l'épreuve des balles, je suppose, mais à l'aide de la MapsEventListener "tilesloaded" fait un assez bon travail:
Découvrez http://jsfiddle.net/jfPZH/ (pas de travail, voir mise à Jour Février 2016)
Bien sûr, si vous n'aimez pas l'initiale de scintillement et une version fiable et vous pouvez faire toutes sortes d'améliorations comme le fadeIn etc: http://jsfiddle.net/vVLWg/ (pas de travail, voir mise à Jour Février 2016)
Donc, j'espère que vous trouverez ce utile - amusez-vous!
Mise à jour: Avec cette méthode, vous pouvez placer n'importe quel autre contrôle (par exemple, les contrôles de la Le Dessin De La Bibliothèque) ainsi. Vous avez juste à vous assurer de sélectionner le conteneur de droite! C'est une modification de l'exemple: http://jsfiddle.net/jP65p/1/ (en quelque sorte toujours de travail)
Mise à jour: Février 2016 Google semble avoir changé le positionnement de la carte de contrôle. Ce n'est pas de casser ma solution. Il a juste besoin de quelques ajustements. Voici donc la mise à jour des violons:
Simple: http://jsfiddle.net/hbnrqqoz/
Fantaisie: http://jsfiddle.net/2Luk68w5/
#newPos .gmnoprint > div
comme un sélecteur: jsfiddle.net/jP65p/1#newPost > div
et ça ne fonctionne pas. Mais maintenant, je vois le flux. Merci pour votre aide. Très apprécié.$('div.gmnoprint:eq(-1), div.gmnoprint:eq(-3)');
a fonctionné pour moi pour la sélection panControl et zoomControlVous pouvez créer un contrôle personnalisé de votre logo, et l'ajouter à la carte pour le positionner. Vous ne pouvez pas définir l'emplacement de la commande directement au-delà de la valeur des constantes, mais vous pouvez décaler l'emplacement à l'aide de rembourrage sur votre contrôle div.
http://code.google.com/apis/maps/documentation/javascript/controls.html
Il est extrêmement simple, il suffit d'ajouter ceci à votre fichier css!
Il va déplacer le contrôle 50px sans hacks ou quoi que ce soit!
ensemble
dans le ZoomControlsOptions qui vous définissez