2012-03-27 2 views
3

Ich möchte mehrere Marker anzeigen, und wenn ich auf jeden Marker klicke, muss ich framecloud Popup mit benutzerdefinierten Daten öffnen.Wie zeigt man mehrere Markierungen mit individuellen framecloud Popups in openlayers an?

Ich konnte kein Tutorial über offene framecloud Popup finden, wenn Sie auf den Marker klicken.

bitte helfen Sie mir diesbezüglich.

+0

Verwenden Sie Vektorebene mit Punkt Features + SelectFeature Kontrolle statt Marker.Dieser Ansatz ist flexibler – drnextgis

+0

können Sie mir bitte ein Beispiel geben Sie bitte ... –

+0

http://openlayers.org/dev /examples/select-feature-openpopup.html – drnextgis

Antwort

4

Dieser Link is helpful. Von ihm habe ich diesen Code als eine Demonstration.

<html> 
<head> 
    <script src="http://openlayers.org/dev/OpenLayers.js"></script> 
    <script type="text/javascript"> 
     var map, mappingLayer, vectorLayer, selectMarkerControl, selectedFeature; 

     function onFeatureSelect(feature) { 
      selectedFeature = feature; 
      popup = new OpenLayers.Popup.FramedCloud("tempId", feature.geometry.getBounds().getCenterLonLat(), 
            null, 
            selectedFeature.attributes.salutation + " from Lat:" + selectedFeature.attributes.Lat + " Lon:" + selectedFeature.attributes.Lon, 
            null, true); 
      feature.popup = popup; 
      map.addPopup(popup); 
     } 

     function onFeatureUnselect(feature) { 
      map.removePopup(feature.popup); 
      feature.popup.destroy(); 
      feature.popup = null; 
     } 

     function init(){ 
      map = new OpenLayers.Map('map'); 
      mappingLayer = new OpenLayers.Layer.OSM("Simple OSM Map"); 

      map.addLayer(mappingLayer); 
      vectorLayer = new OpenLayers.Layer.Vector("Vector Layer", {projection: "EPSG:4326"}); 
      selectMarkerControl = new OpenLayers.Control.SelectFeature(vectorLayer, {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); 
      map.addControl(selectMarkerControl); 

      selectMarkerControl.activate(); 
      map.addLayer(vectorLayer); 
      map.setCenter(
       new OpenLayers.LonLat(0, 0).transform(
        new OpenLayers.Projection("EPSG:4326"), 
        map.getProjectionObject()) 

       , 1 
      );  
     } 

     function placeRandomMarker(){ 
      var randomLat = Math.floor((Math.random()*180)-90); 
      var randomLon = Math.floor((Math.random()*180)-90); 
      var randomLonLat = new OpenLayers.Geometry.Point(randomLon, randomLat); 
      randomLonLat.transform("EPSG:4326", map.getProjectionObject()); 
      var randomFeature = new OpenLayers.Feature.Vector(randomLonLat, 
            { salutation: "hello world", Lon : randomLon, Lat : randomLat}); 
      vectorLayer.addFeatures(randomFeature); 
      var popup = new OpenLayers.Popup.FramedCloud("tempId", new OpenLayers.LonLat(randomLon, randomLat).transform("EPSG:4326", map.getProjectionObject()), 
         null, 
         randomFeature.attributes.salutation + " from Lat:" + randomFeature.attributes.Lat + " Lon:" + randomFeature.attributes.Lon, 
         null, true); 
      randomFeature.popup = popup; 
      map.addPopup(popup); 
     } 


    </script> 


</head> 
<body onload="init()"> 

<div id="map" style="height:600px; width: 1000px;"></div> 
<button onclick="placeRandomMarker()">Place Marker</button> 
</body> 
</html> 

Es hat eine Vektorebene für die Platzierung Punkte (die Sie mit einem Stil Karte Stil könnte custom shapes oder mit graphic markers Die Vektor-Schicht hat eine SelectFeature Control zugeordnet werden, welche Anrufe Code zum Hinzufügen FramedCloud popups zur Karte

+0

Das erste wirklich nützliche Beispiel, das ich gefunden habe! Thx viel ! – LaurentG

Verwandte Themen