OpenLayers可移动标记

Question

我目前正在研究在地图上绘制一些坐标。 使用Ajax，我可以从MySQL数据库获得结果，下面的代码将生成一个包含所有必要点的地图。 我现在遇到的问题是，我想开始更改这些标记的方面，例如颜色，移动标记的能力。

这是我的代码

<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绝对不是我的专业领域，尽管这对我有用，但我并不是100％正确地生成标记。

关于移动标记的功能，我可以从此页面http://wiki.openstreetmap.org/wiki/Marker_API看到，可以使用Marker API来拖动标记。 我已经包含了从https://github.com/robotnic/khtmlib下载的所有文件，可以从该文件的开头看到，但是例如在使用时

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

我收到错误消息“无法读取'Marker'的属性未定义”

如果我在这里使用两种不同的方法，即试图将两种方法混合在一起，我会感到有些困惑。

我能得到的任何帮助将不胜感激。

Answer 1

标记在OpenLayers2中被认为已弃用（尽管从文档中看不出来）。 相反，您应该使用在样式对象中设置了externalGraphic的OpenLayers.Feature.Vector。 这里有一个例子： http : //dev.openlayers.org/releases/OpenLayers-2.13.1/examples/vector-features.html有关样式的更多信息可以在这里找到： http : //docs.openlayers.org/ library / feature_styling.html

要移动功能，请使用OpenLayers.DragFeature.Control，它将在其构造函数中使用OpenLayers.Layer.Vector，该构造函数也是您添加OpenLayers.Feature.Vectors的容器。 此处的示例： http : //openlayers.org/dev/examples/drag-feature.html

将这两者放在一起，应该会产生所需的结果。