OpenLayers可移动标记

Question

I am currently looking into plotting out some coordinates on a map. using Ajax I can get the results from a MySQL Database and the code below is producing a map with all the points necessary. The issue I am now having is I would like to begin changing aspects of those markers, ie colour, the ability to move the marker.

Here is my code

<div id="mapdiv"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
$(document).ready(function (){
  $.ajax({                                      
  url: 'lonlat.php',              
  type: "POST",          
  dataType: 'JSON',                
  success: loopThrough
});


});


map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());

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

var zoom=12;

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

markers.addMarker(new OpenLayers.Marker(lonLat));


var customers = "";

var loopThrough = function(data)
                        { 

                            var customers = data;



                            var i = 0;
                            var count = customers.length;

                            while(i < count)
                            {
                              var lonLat2 = new OpenLayers.LonLat( customers[i].lon ,customers[i].lat )
                                  .transform(
                                    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                                    map.getProjectionObject() // to Spherical Mercator Projection
                                  );
                                  var markers2 = new OpenLayers.Layer.Markers( "Markers" );
                            map.addLayer(markers2);

                              markers2.addMarker(new OpenLayers.Marker(lonLat2));

                              console.log(i);
                              i++;
                            }

                        };






map.setCenter (lonLat, zoom);
</script>

JavaScript is definitely not my area of expertise and although this is working for me, I'm not 100% that I am generating the markers correctly.

Regarding the ability to move the marker I can see from this page http://wiki.openstreetmap.org/wiki/Marker_API it is possible using the Marker API to be able to drag the markers. I have included all the files downloaded from https://github.com/robotnic/khtmlib as can be seen in the head of the document but when using for example

var marker = new khtml.maplib.overlay.Marker({
    position: new khtml.maplib.LatLng(-25.363882,131.044922), 
    map: map,
    title:"static marker"
});

I get an error "Cannot read property of 'Marker' undefined"

I'm slightly confused if I'm using two different things here ie trying to mix two methods together.

Any help I can get would be much appreciated.

Answer 1

Markers are considered deprecated in OpenLayers2 (though this is not obvious from the documentation). Instead, you should use an OpenLayers.Feature.Vector with an externalGraphic set in its style object. There is an example here: http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/vector-features.html More information about styling can be found here: http://docs.openlayers.org/library/feature_styling.html

To move a feature, use the OpenLayers.DragFeature.Control which will take an OpenLayers.Layer.Vector in its constructor, which is the container that you add OpenLayers.Feature.Vectors too. Example here: http://openlayers.org/dev/examples/drag-feature.html

Putting these two together, should yield what you want.