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绝对不是我的专业领域，虽然这对我有用，但我并不是百分之百地认为我正在正确地生成标记。

关于移动标记的能力，我可以从这个页面中看到API，它可以使用标记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"
});

我得到一个错误“无法读取属性的‘标记’未定义”

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

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

Answer 1

标记在OpenLayers2中被认为是不推荐的(尽管这在文档中并不明显)。相反，您应该使用OpenLayers.Feature.Vector，并在其样式对象中设置externalGraphic。这里有一个示例：http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/vector-features.html有关样式的更多信息可以在这里找到：styling.html

要移动特性，请使用OpenLayers.DragFeature.Control，它将在其构造函数中包含一个OpenLayers.Layer.Vector，这也是添加OpenLayers.Feature.Vectors的容器。这里的例子：http://openlayers.org/dev/examples/drag-feature.html

把这两者结合在一起，就能得到你想要的。