2010-09-24 75 views
3

我創造了我的網站OSM的地圖,並與openlayer加入一些標誌。我的問題是,我永諾獲得標記相同的圖標..的OpenLayers問題標記圖標

<script type="text/javascript"> 

var map = new OpenLayers.Map("heatMap"); 
    var mapnik = new OpenLayers.Layer.OSM(); 
    map.addLayer(mapnik); 
    map.setCenter(new OpenLayers.LonLat(-4.0575942987957,54.390175926091) // Center of the map 
     .transform(
     new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 
     new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection 
    ), 6 // Zoom level 
    ); 

    var markers = new OpenLayers.Layer.Markers("Markers"); 
    map.addLayer(markers); 

    var icon1 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset); 
    var icon2 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-gold.png', size, offset); 
    var icon3 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-green.png', size, offset); 

    var lonLat1 = new OpenLayers.LonLat(-4.0575942987957,54.390175926091).transform(
          new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 
          map.getProjectionObject() // to Spherical Mercator Projection 
          ); 

    var lonLat2 = new OpenLayers.LonLat(-3.0575942987957,54.390175926091).transform(
          new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 
          map.getProjectionObject() // to Spherical Mercator Projection 
          ); 

    var lonLat3 = new OpenLayers.LonLat(-5.0575942987957,54.390175926091).transform(
          new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 
          map.getProjectionObject() // to Spherical Mercator Projection 
          ); 

    var marker1 = new OpenLayers.Marker(lonLat1); 
    var feature = new OpenLayers.Feature(markers, lonLat); 
    feature.closeBox = true; 
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true }); 
    feature.data.popupContentHTML = '<p>Marker1<p>'; 
    feature.data.overflow = "hidden"; 

    marker1.feature = feature; 

    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(); 
     } 
     OpenLayers.Event.stop(evt); 
    }; 
    marker1.events.register("mousedown", feature, markerClick); 

    var marker2 = new OpenLayers.Marker(lonLat2); 
    var feature = new OpenLayers.Feature(markers, lonLat); 
    feature.closeBox = true; 
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true }); 
    feature.data.popupContentHTML = '<p>Marker2<p>'; 
    feature.data.overflow = "hidden"; 

    marker2.feature = feature; 

    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(); 
     } 
     OpenLayers.Event.stop(evt); 
    }; 
    marker2.events.register("mousedown", feature, markerClick); 

    var marker3 = new OpenLayers.Marker(lonLat3); 
    var feature = new OpenLayers.Feature(markers, lonLat); 
    feature.closeBox = true; 
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true }); 
    feature.data.popupContentHTML = '<p>Marker 3<p>'; 
    feature.data.overflow = "hidden"; 

    marker3.feature = feature; 

    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(); 
     } 
     OpenLayers.Event.stop(evt); 
    }; 
    marker3.events.register("mousedown", feature, markerClick); 

    markers.addMarker(marker1, icon1); 

    markers.addMarker(marker2, icon2); 

    markers.addMarker(marker3, icon3); 

現在的問題是所有三個標記具有相同的圖標...有人可以幫助我..

回答

6

創建標記實例後更改圖標。

marker = new .... 
var size = new OpenLayers.Size(25, 12); 
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); 
marker.icon = new OpenLayers.Icon("marker.png", size, offset); 
//UPDATE AGAIN 
marker.icon.size = size; 
marker.icon.offset = offset; 
marker.draw(); 

問候