Google maps: Comment ouvrir un InfoWindow pour un Polygon en cliquant dessus?

https://stackoverflow.com/questions/2846041

27-09-2019
|

Question

J'ai une question simple, mais je ne peux pas trouver la réponse dans la documentation de l'API Google Maps ...

J'ai une carte avec 13 polygones drawed par l'API. Voici un exemple d'un de ces polygones:

 var zone_up_montblanc = new GPolygon([
        new GLatLng(46.21270329318585, 6.134903900311617), 
        new GLatLng(46.20538443787925, 6.136844716370282), 
        new GLatLng(46.20525043957647, 6.141375978638086), 
        new GLatLng(46.20698751554006, 6.148050266912262), 
        new GLatLng(46.21110286985207, 6.153203229026629), 
        new GLatLng(46.21730757985668, 6.151718301267355), 
        new GLatLng(46.22092122197341, 6.153676364285801), 
        new GLatLng(46.22615123408969, 6.149844858907489), 
        new GLatLng(46.22851200024137, 6.149876939987202), 
        new GLatLng(46.22945159836955, 6.142758190170017), 
        new GLatLng(46.21735908463437, 6.141457132705133), 
        new GLatLng(46.21753573755057, 6.138058122426195), 
        new GLatLng(46.21270329318585, 6.134903900311617)
        ], "#6b1f43", 2, 0.9, "#92c87f", 0.5);

alors:

  map.addOverlay(zone_up_montblanc);

Polygones apparaît sur ma carte, pas de problème. Mais la chose que je dois faire maintenant est d'ouvrir un « InfoWindow » en cliquant sur chaque polygones (avec un contenu différent pour chaque polygones).

Est-ce que quelqu'un a une idée ou un exemple?

Merci beaucoup pour votre aide!

La solution

Je vais décrire la solution parce que je ne l'ai pas utilisé l'API dans un certain temps, et lutte pour télécharger les plus grandes quantités de code - ne sont pas utilisés pour le code modifier fonctionnalité ici. Reportez-vous à la référence API pour les détails.

Alors, laisse commencer:

Vous ajoutez des polygones à l'aide map.AddOverlay (), la carte stocke alors vos polygones.
Déclarer un gestionnaire d'événements que les clics de captures à la carte. Ce gestionnaire d'événements sera passé un GLatLng de l'endroit cliqué, et la superposition qui a été cliqué (dans votre cas le polygone). Vous pouvez faire un simple test de type à décider si la superposition est un polygone.
Dans l'utilisation du gestionnaire d'événements map.openInfoWindowHtml (), en passant le GLatLng fourni que l'emplacement et le contenu HTML que vous souhaitez afficher.

Il est aussi simple que cela! Vous devrez regarder comment vous attachez les gestionnaires d'événements que je ne me rappelle pas les détails du haut de ma tête. Donc, les choses que vous devez rechercher dans l'API sont:

Ajout de gestionnaires d'événements à la carte
Vérification du type d'une superposition

Vous devriez être en mesure de trouver les méthodes pour appeler et toutes les informations sur la page api:

http://code.google.com/apis/maps/documentation /reference.html

Bonne chance!

Autres conseils

J'ai trouvé une solution très agréable d'avoir plusieurs polygones avec infowindows individuels.

voici mon code:

<script type="text/javascript"
        src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" charset="utf-8">

    var map;
    var cities = {
        "Hamburg":[
            [53.60, 9.75],
            [53.73, 10.19],
            [53.48, 10.22]
        ],
        "Hannover":[
            [52.34, 9.61],
            [52.28, 9.81],
            [52.43, 9.85]
        ],
        "Bremen":[
            [53.22, 8.49],
            [53.12, 8.92],
            [53.02, 8.72]
        ]
    };
    var opened_info = new google.maps.InfoWindow();

    function init() {
        var mapOptions = {
            zoom:8,
            center:new google.maps.LatLng(53, 9.2),
            mapTypeId:google.maps.MapTypeId.TERRAIN
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
                mapOptions);
        for (var c in cities) {
            var coods = cities[c]
            var polyPath = [];
            for (j = 0; j < coods.length; j++) {
                polyPath.push(new google.maps.LatLng(coods[j][0], coods[j][1]));
            }
            var shape = new google.maps.Polygon({
                paths:polyPath,
                fillColor:"#00FF00",
                fillOpacity:0.6,
            });
            shape.infowindow = new google.maps.InfoWindow(
                    {
                        content:"<b>" + c + "</b>" + "</br>",
                    });
            shape.infowindow.name = c;
            shape.setMap(map);
            google.maps.event.addListener(shape, 'click', showInfo);
        }

    }
    ;

    function showInfo(event) {
        opened_info.close();
        if (opened_info.name != this.infowindow.name) {
            this.infowindow.setPosition(event.latLng);
            this.infowindow.open(map);
            opened_info = this.infowindow;
        }
    }

</script>

Il fournit également la fonction de fermer les Infowindows en cliquant sur le même polygone à nouveau.

Salut et merci beaucoup filip-FKU!

grâce à vos commentaires, je trouve finnaly comment faire cela! :-) donc, si la recherche de quelqu'un pour « comment faire », voici l'extrait de code:

GEvent.addListener(zone_up_champagne, "click", function(overlay,latlng) {
    map.openInfoWindowHtml(overlay, '<strong>Your html things :</strong><br />etc...');
});

espère que cela peut aide!

Merci encore FILIP! :)

Pas infowindow global nécessaire. initialiser le côté infowindow dans le gestionnaire d'événements fonctionne. utiliser ce prototype pour vérifier si le point est contenu dans une instance du polygone dans un réseau de polygones.

http://hammerspace.co.uk/projects/maps/

Il y a un exemple qui fonctionne à http://www.ikeepuposted.com/area_served.aspx

V3, vous auriez toujours utiliser le infowindow, mais avec une syntaxe différente:

function initialize() {

// SOME CODE
var mont_blanc_path_array = [ 
new google.maps.LatLng(46.21270329318585, 6.134903900311617),
new google.maps.LatLng(46.20538443787925, 6.136844716370282),
new google.maps.LatLng(46.20525043957647, 6.141375978638086)
];
zone_up_montblanc = new google.maps.Polygon({
    editable: false,    
    paths: mont_blanc_path_array,       
    fillColor: "#0000FF",
    fillOpacity: 0.5,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,     
    strokeWeight: 2
});
// Creating InfoWindow object
var infowindow = new google.maps.InfoWindow({
    content: ' ',
    suppressMapPan:true
});
eventPolygonClick = google.maps.event.addListener(zone_up_montblanc, 'click', function() {
    // MORE CODE OR FUNCTION CALLS
});
// MORE CODE

}

ne importe où vous vous sentez comme changer le texte et l'affichage de la infowindow:

infowindow.setContent("CLICKED me");
infowindow.open(map, zone_up_montblanc);

i ont fait le polygone et EventListener variables globales (en supprimant « var » dans la déclaration variable), de sorte que vous pouvez les modifier dans d'autres fonctions. cela ne prouve délicat avec le comportement de infowindow. certaines personnes préfèrent les cas de infowindow, je préférerais avoir une instance globale et modifier son contenu à la volée. méfiez-vous de l'effet des déclarations variables!

autres addListener pour les polygones sont tout à fait buggy et devrait être testé sur tous les principaux navigateurs avant la publication, en particulier les variations de GLISSEMENT et mouseOver.

a une certaine référence: http://code.google.com /apis/maps/documentation/javascript/overlays.html

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow