9
votes

Tootip sur un polygone dans Google Maps

J'ai des polygones pour diverses région et états de mon application. Les marqueurs implémentent une info-bulle en prenant l'attribut de titre. Sur la souris et la souris sur un cycle de polygone peuvent être tirés. Comment créer une info-bulle qui ressemble à l'info-bulle implémentée pour un marqueur.

Edit-1: Ajout du code utilisé pour créer le polygone et fixer les gestionnaires pour afficher / masquer les info-bulles. P>

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);
}

google-maps google-maps-api-3 tooltip

1 commentaires

Dupliqué possible de Google Maps V3 Polyline ToolTip

4 Réponses :

2
votes

Je pense que vous devrez le faire vous-même.À une page que j'ai implémentée, j'ai joint un événement de déplacement de la souris à la page afin que je puisse enregistrer la position de la souris.En quand un événement de mouse polygone se produit, j'ai affiché une Div personnalisée près du position de la souris

Tooltip Polygon

espère qu'il aide

5 commentaires

J'ai essayé quelque chose comme ça. Mon approche quand comme suit: 1. J'ai les événements de la souris et des souris. 2. J'ai créé un div et l'ai montré dans l'événement de Mouserover et le caché dans l'événement Mouseout. Cela n'a pas fonctionné pour moi.

Peut-être que si vous postez votre code, nous pouvons comprendre où l'erreur est venue.

Essayez de placer une div dans le HTML et ne la créez pas de manière dynamique.Aussi essayer d'utiliser CSS ----> Afficher: Aucun

Suivi les deux étapes. Étrangement, je ne reçois même pas une erreur JS. Gardé une divication statique dans une page et a rendu la Div pour apparaître sur la sourisovante du polygone, mais ne vois aucun changement.

Je suggère d'essayer d'obtenir un mini-projet distinct pour tester la Div Hide-show juste pour vous assurer de tout faire de la bonne façon, puis essayez de joindre le code testé à votre projet principal.

0
votes

Vous pouvez essayer ce qui suit xxx

puis lorsque l'événement de clic se produit appeler la fonction suivante xxx

0 commentaires

5
votes

Il y a en fait un trucoche pour travailler autour de cette limitation (étrange) dans Google Maps. Lors du déplacement de votre souris sur un élément de données, vous pouvez simplement ajouter une info-bulle au

  code>. Il sera ajouté à l'emplacement où votre pointeur de souris est actuellement - juste sur l'article! function mouseOverDataItem(mouseEvent) {
  const titleText = mouseEvent.feature.getProperty('propContainingTooltipText');

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

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

0 commentaires

0
votes

Ce code fonctionne pour moi: Googleshape - est votre polygone ou votre cercle ou votre rectangle. TITLETEXT - Message Vous devez poster sur la survolte des formes.

google.maps.event.addListener(googleshape, 'mouseover', function() {
    this.map.getDiv().setAttribute('title', "`titleText`");
});
google.maps.event.addListener(googleshape, 'mouseout', function() {
    this.map.getDiv().removeAttribute('title');
});

0 commentaires