Info-bulle sur un Polygone dans Google Maps

J'ai des polygones pour les différentes régions et les états dans mon application. Les marqueurs de mettre en œuvre info-bulle en prenant l'attribut title. Sur mouseover et mouseout sur un polygone événements peuvent être tirés. Comment puis-je créer une info-bulle qui ressemble à de l'info-bulle qui est mis en œuvre pour un marqueur.

Edit-1: Ajouter le code utilisé pour créer le polygone et le joindre aux gestionnaires afin d'afficher/masquer les info-bulles.

function addPolygon(points) {
    var polygon = new google.maps.Polygon({
        paths: points,
        strokeColor: " #FFFFFF",
        strokeOpacity: 0.15,
        strokeWeight: 1.5,
        fillColor: "#99ff66",
        fillOpacity: 0.14
    });
    var tooltip = document.createElement('div');
    tooltip.innerHTML = "Alok";

    google.maps.event.addListener(polygon,'mouseover',function(){
        tooltip.style.visibility = 'visible';
    });
    google.maps.event.addListener(polygon,'mouseout',function(){
        tooltip.style.visibility = 'hidden';
    });
    polygon.setMap(map);
}

Double Possible de Google maps v3 polyligne infobulle

OriginalL'auteur Alok Swain | 2010-11-29

2

Je pense que vous aurez à faire vous-même.Dans une page, j'ai implémenté j'ai attaché une souris déplacer l'événement à la page, je peux enregistrer la position de la souris.Puis, quand un polygone événement mouseover se produit-je afficher une coutume div près de la position de la souris

Espère que cela aide

Je l'ai fait essayer quelque chose comme cela. Mon approche quand comme suit: 1. J'ai le mouseover et mouseout événements. 2. J'ai créé un div et il a montré dans le mouserover événement et le cacha dans le mouseout événement. Cela n'a pas fonctionné pour moi.
Peut-être que si vous postez votre code, nous pouvons comprendre où est l'erreur vient de.
Je suis de le placer dans une édition de la question.
Essayez de placer une div à l'intérieur de l'html et de ne pas créer de façon dynamique.Également essayer d'utiliser css---->display:none
Suivi à la fois les étapes. Étrangement je n'ai pas même obtenir une erreur js. Gardé une statique de la div dans une page et faite la div s'affiche sur l'infobulle de polygone, mais à force de les voir tous les changements.

OriginalL'auteur Argiropoulos Stavros

Il y a en fait une astuce pour contourner cette (étrange) limitation dans Google Maps. Lorsque vous déplacez votre souris sur un élément de données, vous pouvez simplement ajouter une info-bulle à la carte <div>. Il sera ajouté à l'endroit où le pointeur de la souris est actuellement - droit sur l'élément!

map.data.addListener('mouseover', mouseOverDataItem);
map.data.addListener('mouseout', mouseOutOfDataItem));

...

function mouseOverDataItem(mouseEvent) {
  const titleText = mouseEvent.feature.getProperty('propContainingTooltipText');

  if (titleText) {
    map.getDiv().setAttribute('title', titleText);
  }
}

function mouseOutOfDataItem(mouseEvent) {
  map.getDiv().removeAttribute('title');
}

OriginalL'auteur Vincent Sels

Vous pouvez essayer la

//Add a listener for the click event
google.maps.event.addListener('click', showArrays);
infoWindow = new google.maps.InfoWindow;

puis, quand l'événement click se produit d'appel de la fonction suivante

function showArrays(event) {

  var contentString = 'Content here';

  //Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

OriginalL'auteur kcode

Vous devez vous connecter pour publier un commentaire.