javascript - Using custom markers instead of default marker (Openlayers)

This is a simple problem but I'm tangled up in the code and can't figure out the solution; hope someone can help!

I have three markers on a map and want each marker to be a different icon.

I can't work out where to make this happen - do I need to redraw?

I have seen this question OpenLayers problem with marker icons , but don't understand how to implement the solution.

My code:

      function init() {
    map = new OpenLayers.Map("basicMap");
    var mapnik         = new OpenLayers.Layer.Stamen("toner-background");
    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var position       = new OpenLayers.LonLat(30,55.515).transform( fromProjection, toProjection);
    var zoom           = 4; 

    map.addLayer(mapnik);
    map.setCenter(position, zoom );


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

var icon1 = new OpenLayers.Icon('.png', size, offset);
var icon2 = new OpenLayers.Icon('.png', size, offset);
var icon3 = new OpenLayers.Icon('.png', size, offset);

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


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

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

var marker1 = new OpenLayers.Marker(lonLat1);
    var size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    marker1.icon.size = size;
marker1.icon.offset = offset;

var feature = new OpenLayers.Feature(markers, lonLat1);
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 size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);



var feature = new OpenLayers.Feature(markers, lonLat2);

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 size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    marker3.icon.size = size;
marker3.icon.offset = offset;
var feature = new OpenLayers.Feature(markers, lonLat3);
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);

  }

Thanks!

This is a simple problem but I'm tangled up in the code and can't figure out the solution; hope someone can help!

I have three markers on a map and want each marker to be a different icon.

I can't work out where to make this happen - do I need to redraw?

I have seen this question OpenLayers problem with marker icons , but don't understand how to implement the solution.

My code:

      function init() {
    map = new OpenLayers.Map("basicMap");
    var mapnik         = new OpenLayers.Layer.Stamen("toner-background");
    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var position       = new OpenLayers.LonLat(30,55.515).transform( fromProjection, toProjection);
    var zoom           = 4; 

    map.addLayer(mapnik);
    map.setCenter(position, zoom );


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

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

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


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

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

var marker1 = new OpenLayers.Marker(lonLat1);
    var size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    marker1.icon.size = size;
marker1.icon.offset = offset;

var feature = new OpenLayers.Feature(markers, lonLat1);
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 size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);



var feature = new OpenLayers.Feature(markers, lonLat2);

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 size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    marker3.icon.size = size;
marker3.icon.offset = offset;
var feature = new OpenLayers.Feature(markers, lonLat3);
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);

  }

Thanks!

Share Improve this question edited May 23, 2017 at 11:43 CommunityBot 11 silver badge asked May 29, 2013 at 13:13 juicycoder 1651 gold badge2 silver badges5 bronze badges

Have a look at Openlayers StyleMaps and lookup tables – Christophe Roussy Commented May 29, 2013 at 15:54

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

See the OpenLayers Marker documentation which has an example. You are passing the icon at the wrong location. It has to be done inside the OpenLayers.Marker() constructor and not at OpenLayers.Layer.Markers.addMarker().

Instead of

var marker1 = new OpenLayers.Marker(lonLat1);

try

var marker1 = new OpenLayers.Marker(lonLat1, icon1);

and remove the second parameter at your addMarker() calls because they are ignored.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744758224a4592010.html

javascript - Using custom markers instead of default marker (Openlayers) - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Using custom markers instead of default marker (Openlayers) - Stack Overflow

1 Answer 1

相关推荐