Étiquettes de texte sur Google Maps v3
J'ai récemment migré à partir de la v2 à la v3 sur Google Maps, et l'une des fonctionnalités qui a cassé a l'aide des étiquettes de texte, dont j'ai été mise en œuvre à l'aide d'un tiers de la bibliothèque (BpLabel)
Question:
Comment puis-je afficher les étiquettes de texte dans Google Maps v3, qui ont des événements comme le "survol" qui se déclenche?
Note: je ne veux pas d'un marqueur visible alongwith le texte de l'étiquette. Je ne veux que le texte d'étiquette pour être visible
Ce Que J'Ai Essayé:
- Utilisé InfoWindow, mais il est trop encombré et la superposition doit être explicitement fermée, alors que j'ai besoin de la superposition d'être fermée lorsque le pointeur de la souris passe dessus
- Utilisé InfoBox, ce qui n'est pas aussi encombré que l'InfoWindow, mais cela aussi n'a pas les déclencheurs d'événement comme le passage de la souris
Aucune aide de quelqu'un qui a fait face à des problèmes similaires, sera très apprécié.
Acclamations,
Rohitesh
source d'informationauteur Rohitesh
Vous devez vous connecter pour publier un commentaire.
Je pense que la seule solution c'est d'utiliser des marqueurs comme des étiquettes, c'est à dire une modification de la forme du marqueur pour vos étiquettes. Deux idées sur la façon de le faire:
1) Utiliser la modification des marqueurs personnalisés de forme et de texte - par exemple icônes d'image générées à l'aide de Google Image Graphiques et Infographie (comme ici ou ici). Mais de l'API de google pour créer de telles icônes est obsolète et sans remède! Ou n'est-ce pas?? Il y a une confusion, voir mon commentaire ici.
2) Utilisation markerwithlabel bibliothèque (qui se trouve facilement sur google "google maps texte dans le repère"). Avec cette bibliothèque, vous pouvez définir des marqueurs avec des étiquettes avec ou sans marqueur d'icônes. Si vous ne voulez pas le marqueur de l'icône, il suffit de définir
icon: {}
:Alors vous pouvez travailler avec elle comme avec les marqueurs, c'est à dire ajouter InfoWindow pour mouseover événements!
Voici l'exemple comment utiliser cette bibliothèque pour ce que vous avez besoin.
Rivaliser code:
Vous pouvez utiliser l'InfoBox, mais vous ne pouvez pas utiliser hover événements avec elle par ajouter des écouteurs d'événement à la carte. Vous pouvez ajouter une classe pour votre info boîtes (la classe par défaut est infobox), donc vous devriez être en mesure d'ajouter passez directement à cette utilisation de jQuery ou JavaScript. Voici le code que j'utilise pour ne pas afficher un marqueur de l'étiquette:
Alors vous devriez être capable de faire cela pour créer un hover événement:
ou
Si vous avez besoin de le voir en action:
rendez-vous ici: http://travelalaska.dawleyassociates.com/Destinations/Regions.aspx
ouvrez votre console et tapez (copier/coller): $('.regionLabel').hover(function(){console.log ("planait');}, function(){console.log ("unhovered');});
passez la souris sur les grands labels et vous verrez le texte de sortie de la console.
Vous pouvez indiquer à Google Maps pour utiliser une icône dont l'URL d'une image SVG. Dans la plupart des navigateurs, il peut aussi être un URI. Si vous savez comment générer approprié SVG pour le marqueur que vous souhaitez côté client, alors vous pouvez le faire et ensuite utiliser un Base64 bibliothèque pour convertir le SVG chaîne en Base64 de données, faites-le précéder "data:image/svg+xml;base64," et c'est alors utilisable en tant que données d'URI.
Notez qu'Internet Explorer semble un peu plus pointilleux, et j'ai trouvé que j'avais besoin de scaledSize de la propriété ainsi que la taille habituelle, à l'origine, d'ancrage et les propriétés de l'url pour obtenir toute la SVG à rendre.
Cette approche permet d'utiliser une image SVG, y compris le style de texte, de sorte que vous pouvez ensuite créer un marqueur avec une étiquette avec quel que soit le style que vous avez besoin.