Google maps: ¿Cómo abrir una ventana de información para un polígono haciendo clic sobre ella?

https://stackoverflow.com/questions/2846041

27-09-2019
|

Pregunta

Tengo una pregunta simple, pero no puedo encontrar la respuesta en la documentación de la API de Google Maps ...

Tengo un mapa con 13 polígonos dibujada por la API. He aquí un exemple de uno de estos 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);

a continuación:

  map.addOverlay(zone_up_montblanc);

Los polígonos aparece en mi mapa, no hay problema. Pero lo que tengo que hacer ahora es abrir una "ventana de información" haciendo clic en cada uno de los polígonos (con un contenido diferente para cada uno de los polígonos).

¿Alguien tiene una idea o un ejemplo?

Gracias mucho por su ayuda!

Solución

Me describirá la solución, ya que no he utilizado la API desde hace tiempo, y la lucha para cargar cualquier cantidad de código más grandes - no se utilizan para la función de edición en código aquí. Consulte la referencia de API para los detalles.

Por lo tanto, vamos a empezar:

Usted está agregando polígonos utilizando Map.addOverlay (), el mapa y luego almacena los polígonos.
Declarar un controlador de eventos que atrapa clic en el mapa. Ese controlador de eventos se le pasará un GLatLng de la ubicación se hace clic, y la superposición que se ha hecho clic (en su caso el polígono). Se puede hacer una prueba de tipo simple para decidir si la superposición es un polígono.
En el uso map.openInfoWindowHtml controlador de eventos (), pasando el GLatLng suministra como la ubicación y el contenido HTML que desea mostrar.

Es tan simple como eso! Usted tendrá que buscar la manera de conectar los controladores de eventos, ya que no recuerdo los detalles de la parte superior de la cabeza. Así las cosas que hay que buscar en la API son:

Adición de controladores de eventos al mapa
Comprobación del tipo de una superposición

debe ser capaz de encontrar los métodos para llamar y toda la información en la página de la API:

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

Buena suerte!

Otros consejos

He encontrado una muy buena solución para tener múltiples polígonos con ventanas de información individuales.

aquí está mi 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>

También proporcionar la función de cerrar las ventanas de información haciendo clic en el mismo polígono de nuevo.

Hola y muchas gracias Filip-fku!

gracias a su comentario, i finnaly encuentro cómo hacer esto! :-) Por lo tanto, si la búsqueda a nadie por "cómo hacerlo", aquí es el fragmento de código:

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

Esperamos que esto pueda ayuda!

gracias de nuevo Filip! :)

No se necesita infowindow mundial. inicializar la ventana de información en el lado funciona el controlador de eventos. utilizar este prototipo muy para comprobar si el punto está contenido en una instancia del polígono en una matriz de polígonos.

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

Hay un ejemplo de funcionamiento en http://www.ikeepuposted.com/area_served.aspx

en V3, que podría seguir utilizando la ventana de información, pero con diferente sintaxis:

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

}

en cualquier lugar que se siente como cambiar el texto y la visualización de la ventana de información:

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

He hecho el polígono y EventListener variables globales (suprimiendo "var" en la declaración de variables), por lo que puede alterar en otras funciones. eso no resultar difícil con el comportamiento ventana de información. algunas personas prefieren las instancias de ventana de información, preferiría tener una instancia global y alterar su contenido sobre la marcha. cuidado con el efecto de las declaraciones de variables!

otro addListener para los polígonos son bastante buggy y debe ser probado en todos los principales navegadores antes de la publicación, especialmente las variaciones de arrastrar y mouseOver.

esto tiene alguna referencia: http://code.google.com /apis/maps/documentation/javascript/overlays.html

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow