Mapas do Google:Como abrir uma InfoWindow para um polígono clicando nele?

https://stackoverflow.com/questions/2846041

27-09-2019
|

Pergunta

Tenho uma pergunta simples, mas não consigo encontrar a resposta na documentação da API do Google Maps...

Tenho um mapa com 13 polígonos desenhados pela API.Aqui está um exemplo de um desses polígonos:

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

então :

  map.addOverlay(zone_up_montblanc);

Polígonos aparecem no meu mapa, sem problemas.Mas o que tenho que fazer agora é abrir uma "InfoWindow" clicando em cada polígono (com um conteúdo diferente para cada polígono).

Alguém teve uma ideia ou um exemplo?

Muito obrigado por sua ajuda !

Solução

Descreverei a solução porque não uso a API há algum tempo e luto para fazer upload de quantidades maiores de código - não usadas no recurso de edição de código aqui. Consulte a referência da API para obter os detalhes.

Então vamos começar:

Você está adicionando polígonos usando o map.addoverlay (), o mapa armazena seus polígonos.
Declare um manipulador de eventos que capta cliques no mapa. Esse manipulador de eventos será passado um brilho do local clicado e a sobreposição que foi clicada (no seu caso, o polígono). Você pode fazer um teste de tipo simples para decidir se a sobreposição é um polígono.
No manipulador, use o map.openinfowindowhtml (), passando o glatlng fornecido como local e o conteúdo HTML que você deseja exibir.

É simples assim! Você terá que procurar como anexar manipuladores de eventos, pois não me lembro dos detalhes do topo da minha cabeça. Então, as coisas que você precisa procurar na API são:

Adicionando manipuladores de eventos ao mapa
Verificando o tipo de sobreposição

Você deve encontrar os métodos para ligar e todas as informações na página da API:

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

Boa sorte!

Outras dicas

Encontrei uma solução muito boa para ter vários polígonos com as informações individuais.

Aqui está o meu código:

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

Ele também fornece a função para fechar as informações clicando no mesmo polígono novamente.

Oi e muito obrigado filip-fku!

Graças ao seu comentário, finalmente descobri como fazer isso! :-) Então, se alguém procurar "como fazer isso", aqui está o snippet de código:

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

Espero que isso possa ajudar!

Obrigado novamente Filip! :)

Nenhuma infowindow global é necessária. Inicialize a infowindow no lado que o manipulador de eventos funciona. Use este Protoype para verificar se o ponto está contido em uma instância do polígono em uma matriz de polígonos.

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

Há um exemplo funcional em http://www.ikeeposted.com/area_served.aspx

na V3, você ainda usaria a janela de informações, mas com sintaxe diferente:

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

}

em qualquer lugar que você desejar alterar o texto e exibir a janela de informações:

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

criei as variáveis globais polygon e eventlistener (suprimindo "var" na declaração da variável), para que você possa alterá-las em outras funções.isso é complicado com o comportamento da janela de informações.algumas pessoas preferem instâncias de infowindow, eu preferiria ter uma instância global e alterar seu conteúdo rapidamente.cuidado com o efeito das declarações de variáveis!

outros addListener para polígonos apresentam muitos bugs e devem ser testados em todos os principais navegadores antes da publicação, especialmente nas variações de DRAGGING e MOUSEOVER.

isso tem alguma referência: http://code.google.com/apis/maps/documentation/javascript/overlays.html

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow