Google Maps: Wie öffne ich ein InfoWindow für ein Polygon, indem ich darauf klicke?

Question

Ich habe eine einfache Frage, aber ich kann die Antwort in der Google Maps API-Dokumentation nicht finden ...

Ich habe eine Karte mit 13 Polygone von der API gezeichnet. Hier ist ein exemple eines dieser Polygone:

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

dann:

map.addOverlay(zone_up_montblanc); 

Polygonen erscheint auf meiner Karte, kein Problem. Aber die Sache, die ich jetzt tun muss, ist, ein "InfoWindow" zu öffnen, indem ich auf jedes Polygon klicke (mit einem unterschiedlichen Inhalt für jedes Polygon).

Hat jemand eine Idee oder ein Beispiel?

Vielen Dank für Ihre Hilfe!

Answer 1

Ich werde die Lösung beschreiben, weil ich die API seit einiger Zeit nicht mehr benutzt habe und Mühe habe, größere Code-Mengen hochzuladen - nicht an die Code-Bearbeitungsfunktion hier gewöhnt. Details finden Sie in der API-Referenz.

So können beginnen:

1. Sie fügen Polygone Map.addOverlay() verwendet, die Karte dann Polygone speichert.
2. Deklarieren Sie einen Ereignishandler, der Klicks auf die Karte erfasst. Dieser Event-Handler erhält eine GLatLng des angeklickten Standorts und des Overlays, auf das geklickt wurde (in Ihrem Fall das Polygon). Sie können einen einfachen Test durchführen, um zu entscheiden, ob das Overlay ein Polygon ist.
3. Verwenden Sie im Ereignishandler map.openInfoWindowHtml(), übergeben Sie den als Speicherort angegebenen GLatLng und den HTML-Inhalt, der angezeigt werden soll.

Es ist so einfach! Sie werden nachsehen müssen, wie Sie Event-Handler anhängen, da ich mich nicht an die Besonderheiten in meinem Kopf erinnern kann. So Dinge, die Sie in der API nachschlagen müssen, sind:

• Hinzufügen von Ereignishandler der Karte
• Überprüfung der Art eines Overlays

Sie sollten in der Lage, die Methoden zu finden und rufen alle Infos auf der api Seite:

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

Viel Glück!

Answer 2

Hallo und danke viel filip-fku!

dank deinem kommentar finde ich finnaly wie man das macht! :-) so, wenn jemand nach „wie dies zu tun“, hier ist der Code-Schnipsel:

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

Hoffnung kann dies hilft!

danke nochmal filip!:)

Answer 3

in V3, würden Sie immer noch das Infofenster verwenden, jedoch mit unterschiedlicher Syntax:

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 

} 

überall fühlen Sie sich wie Sie den Text ändern und Anzeigen der Infofenster:

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

i gemacht haben die globalen Variablen polygone und eventlistener (durch Unterdrücken von "var" in der Variablendeklaration), so dass Sie sie in anderen Funktionen ändern können. das erweist sich beim infowindow-Verhalten als knifflig. einige Leute bevorzugen Instanzen von InfoWindow, ich würde lieber eine globale Instanz haben und ihren Inhalt im laufenden Betrieb ändern. Vorsicht vor der Wirkung von Variablendeklarationen!

andere addListener für Polygone sind ziemlich fehlerhaft und sollten vor der Veröffentlichung auf allen gängigen Browsern getestet werden, insbesondere die Variationen von DRAGGING und MOUSEOVER.

dies hat einige Referenz: http://code.google.com/apis/maps/documentation/javascript/overlays.html

Answer 4

ich eine sehr schöne Lösung gefunden mehrere Polygone mit einzelnen Infofenster zu haben.

hier ist mein 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> 

Es beinhaltet auch die Funktion, die Infofenster zu schließen, indem wieder auf dem gleichen Polygon klicken.

Answer 5

Kein globales Infofenster erforderlich. Initialisiere das Infofenster in der Seite, in der der Event-Handler arbeitet. Verwenden Sie dieses Protoyp, um zu prüfen, ob der Punkt in einer Polygoninstanz in einem Polygonarray enthalten ist.

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

Es gibt ein funktionierendes Beispiel bei http://www.ikeepuposted.com/area_served.aspx ist