Google maps: Come aprire un InfoWindow per un poligono cliccando su di esso?

https://stackoverflow.com/questions/2846041

27-09-2019
|

Domanda

Ho una domanda semplice, ma non riesco a trovare la risposta nella documentazione delle API di Google Maps ...

Ho una mappa con 13 poligoni drawed dall'API. Ecco un esempio di uno di questi poligoni:

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

quindi:

  map.addOverlay(zone_up_montblanc);

I poligoni appare sulla mia mappa, nessun problema. Ma la cosa che devo fare ora è quello di aprire un "InfoWindow" cliccando su ogni poligoni (con un contenuto diverso per ogni poligoni).

qualcuno ha avuto un'idea o un esempio?

Grazie mille per il vostro aiuto!

Soluzione

I descriverà la soluzione, perché non ho usato l'API in un po ', e la lotta per caricare le grandi quantità di codice - non utilizzati per il codice della funzione di modifica qui. Fare riferimento al riferimento API per i dettagli.

Quindi, consente di iniziare:

Si sta aggiungendo poligoni utilizzando map.AddOverlay (), la mappa memorizza quindi i vostri poligoni.
Dichiarare un gestore di eventi che cattura scatti alla mappa. Questo gestore di eventi verrà passato un GLatLng del luogo cliccato, e la sovrapposizione che è stato cliccato (nel tuo caso il poligono). Si può fare un semplice test di tipo per decidere se la sovrapposizione è un poligono.
Nell'uso gestore di eventi map.openInfoWindowHtml (), passando il GLatLng fornito come la posizione, e il contenuto HTML che si desidera visualizzare.

Si tratta di una semplice! Si dovrà cercare come si allega i gestori di eventi, come non mi ricordo le specifiche fuori dalla parte superiore della mia testa. Quindi le cose è necessario guardare in API sono:

L'aggiunta di gestori di eventi alla mappa
Controllo del tipo di una sovrapposizione

Si dovrebbe essere in grado di trovare i metodi per chiamare e tutte le informazioni sulla pagina api:

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

In bocca al lupo!

Altri suggerimenti

Ho trovato una bella soluzione per avere più poligoni con i singoli infowindows.

Ecco il mio codice:

<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>

Fornisce anche la funzione di chiudere i Infowindows cliccando sulla stessa poligono nuovamente.

Ciao e grazie mille Filip-FKU!

grazie al tuo commento, ho finnaly trovo come fare questo! :-) quindi, se la ricerca chiunque per "come fare questo", ecco il frammento di codice:

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

spera che questo possa aiuta!

grazie ancora Filip! :)

Non infowindow globale necessaria. inizializzare l'infowindow nel lato funziona il gestore di eventi. utilizzare questo prototipo per verificare se il punto è contenuto in un caso del poligono in una matrice di poligoni.

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

C'è un esempio funzionante a http://www.ikeepuposted.com/area_served.aspx

in V3, si sarebbe ancora utilizzare l'infowindow, ma con sintassi diversa:

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

}

ovunque si voglia cambiare il testo e la visualizzazione del infowindow:

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

Ho fatto il poligono e EventListener variabili globali (da sopprimere "var" nella dichiarazione delle variabili), in modo che li si può alterare in altre funzioni. ciò dimostrare difficile con il comportamento infowindow. alcune persone preferiscono le istanze di infowindow, avrei preferito un'istanza globale e modificare il suo contenuto al volo. attenzione l'effetto di dichiarazioni di variabili!

altro addListener per i poligoni sono abbastanza buggy e dovrebbe essere testato su tutti i principali browser prima della pubblicazione, in particolare le variazioni di trascinare e di passaggio del mouse.

questo ha qualche riferimento: http://code.google.com /apis/maps/documentation/javascript/overlays.html

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow