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

admin管理员组

文章数量:1391995

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!

• javascript
• openlayers
• openstreetmap

Share Improve this question Follow edited May 23, 2017 at 11:43 CommunityBot 111 silver badge asked May 29, 2013 at 13:13 juicycoderjuicycoder 16511 gold badge22 silver badges55 bronze badges 1

• 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.

本文标签： javascriptUsing custom markers instead of default marker (Openlayers)Stack Overflow