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中，标记被视为已弃用（尽管文档中并不明显）。相反，您应该使用OpenLayers.Feature.Vector，并在其样式对象中设置externalGraphic。这里有一个示例：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

将这两者放在一起，应该得到你想要的东西。

OpenLayers Movable Marker

1 个答案: