Marker Image wechsel

Communities Deutschland (Germany)
1

Hallo Leute,
hab mal wieder ein Problem -.-
folgendes:

Ich habe jetz eine Karte mit Popup und allem drum und dran, nun muss ich aber noch das Image des Markers ändern.
Kann mir jemand sagen was ich in meinem Code ändern muss?
Habe es schon mit einem Icon Parameter bei der addmarker funktion probiert hat aber leider nicht geklappt.

Hir mal mein Quellcode (ohne icon definition)


 <script type="text/javascript">
        var map;
        var layer, markers;
        var currentPopup;
       
// different popup types

        //framed

        //disable the autosize for the purpose of our matrix
        OpenLayers.Popup.FramedCloud.prototype.autoSize = false;

        AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
            'autoSize': true
        });

        /*AutoSizeFramedCloudMinSize = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
            'autoSize': true, 
            'minSize': new OpenLayers.Size(50,50)
        });*/

        /*AutoSizeFramedCloudMaxSize = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
            'autoSize': true, 
            'maxSize': new OpenLayers.Size(100,100)
        });*/

        
        function init(){
            map = new OpenLayers.Map("map");
            map.addLayer(new OpenLayers.Layer.OSM());
            map.setCenter(
                new OpenLayers.LonLat(12.70321,50.78218).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 16
            );
       
            markers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(markers);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            addMarkers();
        }

        function addMarkers() {

            var ll, popupClass, popupContentHTML;
        
            //anchored bubble popup small contents autosize closebox
            //Marker setzen

            ll = new OpenLayers.LonLat(12.70321,50.78218).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = "<?php echo "Hallo"?>";
            addMarker(ll,popupClass, popupContentHTML,true, true);

             ll = new OpenLayers.LonLat(4,20).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = "<?php echo "Hallo"?>";
            addMarker(ll, popupClass, popupContentHTML,true, true);

        }

        /**
         * Function: addMarker
         * Add a new marker to the markers layer given the following lonlat, 
         *     popupClass, and popup contents HTML. Also allow specifying 
         *     whether or not to give the popup a close box.
         * 
         * Parameters:
         * ll - {<OpenLayers.LonLat>} Where to place the marker
         * popupClass - {<OpenLayers.Class>} Which class of popup to bring up 
         *     when the marker is clicked.
         * popupContentHTML - {String} What to put in the popup
         * closeBox - {Boolean} Should popup have a close box?
         * overflow - {Boolean} Let the popup overflow scrollbars?
         */
        function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {

            var feature = new OpenLayers.Feature(markers, ll); 
            feature.closeBox = closeBox;
            feature.popupClass = popupClass;
            feature.data.popupContentHTML = popupContentHTML;
            feature.data.overflow = (overflow) ? "auto" : "hidden";
                    
            var marker = feature.createMarker();

            var markerClick = function (evt) {
                if (this.popup == null) {
                    this.popup = this.createPopup(this.closeBox);
                    map.addPopup(this.popup);
                    this.popup.show();
                } else {
                    this.popup.toggle();
                }
                currentPopup = this.popup;
                OpenLayers.Event.stop(evt);
            };
            marker.events.register("mousedown", feature, markerClick);

            markers.addMarker(marker);
        }

    </script>
2

IMHO brauchst du nur in der folgenden Zeile den Dateinamen des Icons zu ersetzen.

Natürlich muss ein Icon mit dem entsprechenden Namen vorhanden sein… :wink:
Georg

3

Danke für die schnelle Antwort.

So habe ich es doch auch bei mir definiert aber es funktioniert eben nicht!

Das habe ich auch schon überprüft!

4

Das Icon wird bei createMarker mitgegeben, ungefähr an dieser Stelle:

            
            var feature = new OpenLayers.Feature(markers, ll);
            feature.closeBox = closeBox;
            feature.popupClass = popupClass;
            feature.data.popupContentHTML = popupContentHTML;
            feature.data.overflow = (overflow) ? "auto" : "hidden";

/**** diese drei Zeilen einfuegen ***/
            var size = new OpenLayers.Size(21,25);
            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            feature.data.icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-blue.png', size, offset);
/**** ab hier weiter wie vorher  ***/
                    
            var marker = feature.createMarker();
5

Danke, klappt alles.

Wie kann ich nun für jeden Marker den ich erstellt habe unterschiedliche Images definieren?
z.B das eine Icon rot anderes blau usw.

Mit freundlichen Grüßen
Nico

6

musst halt der Funktion addMarker sagen:


function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow, farbe) {

......

var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
if(farbe=="blau"){feature.data.icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-blue.png', size, offset);}
if(farbe=="rot"){feature.data.icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);}
                    
var marker = feature.createMarker();

und bei deren Aufruf mit angeben:

ll = new OpenLayers.LonLat(12.70321,50.78218).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
popupClass = AutoSizeFramedCloud;
popupContentHTML = "<?php echo "Hallo"?>";
addMarker(ll,popupClass, popupContentHTML,true, true,"blau");

ll = new OpenLayers.LonLat(4,20).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
popupClass = AutoSizeFramedCloud;
popupContentHTML = "<?php echo "Hallo"?>";
addMarker(ll, popupClass, popupContentHTML,true, true,"rot");

Wenn Du mehr als rot, blau, gold und grün haben willst, musst du die Icons aber woanders her besorgen oder selber malen, OL hat nur die vier, soweit ich weiss…