Question

我需要在地图接近/离开时，不要擦除标记。

我的脚本是这样的：

的js

 $(document).ready(function() {
   //init 
   var map;
   var posMarcador; // Posicion del marcador

   var options = {
     restrictedExtent: extent,
     controls: [
       new OpenLayers.Control.Navigation(),
       new OpenLayers.Control.PanZoomBar(),
       new OpenLayers.Control.Attribution()
     ]
   };

   var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
   map = new OpenLayers.Map( 'map', options);
   layerBase = new OpenLayers.Layer.OSM();
   map.addLayer(layerBase);
   map.setCenter(extent.getCenterLonLat(), zoom);

   map.isValidZoomLevel = function(zoomLevel) {
     return ( (zoomLevel != null) &&
              (zoomLevel >= 11) && // set min level here, could read from property
              (zoomLevel < 17) );
   }

   var iconImage = //url image


   /**
    * Marcador
    * @type {OpenLayers.Layer.Markers}
    */
   var layerMarkers = new OpenLayers.Layer.Markers( "Markers" );
   map.addLayer(layerMarkers);

   map.events.register("click", map, function(e) {
     layerMarkers.clearMarkers();
     var position = map.getLonLatFromViewPortPx(e.xy);
     posMarcador = new OpenLayers.LonLat(position.lon, position.lat);
     var size = new OpenLayers.Size(50,50);
     var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
     var icon = new OpenLayers.Icon(iconImage(tipoIcono), size, offset);
     layerMarkers.addMarker(new OpenLayers.Marker(posMarcador, icon));
     posMarcador =   posMarcador.transform(toProjection  , fromProjection );
     $('input[name="geopunto.latitud"]').val(posMarcador.lat);
     $('input[name="geopunto.longitud"]').val(posMarcador.lon);
  });
});

我的观点是：

<div id="map"></div>

当我放置静态点（取消注册点击事件）时，它可以正常工作。我希望你能提供帮助。

Answer 1

您正在posMarcador保存新标记的位置。在缩放地图后，您应该重复使用。我创建了一个单独的函数来重复放置标记，在你的情况下它可能是这样的：

function addNewMarker(pos) {
    posMarcador = pos;     // save pos

    var size = new OpenLayers.Size(50,50);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    var icon = new OpenLayers.Icon(iconImage(tipoIcono), size, offset);

    layerMarkers.addMarker(new OpenLayers.Marker(posMarcador, icon));            

    var np = pos.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
    $('input[name="geopunto.latitud"]').val(np.lon.toFixed(6));
    $('input[name="geopunto.longitud"]').val(np.lat.toFixed(6));
}

单击标记后，将其放置为：

map.events.register('click', map, function(ev) {
    layerMarkers.clearMarkers();
    var position = map.getLonLatFromViewPortPx(ev.xy);
    addNewMarker(position);
});

现在将一个函数绑定到map的zoomend事件。

map.events.register('zoomend', map, function(ev){
    if (posMarcador != undefined) {
        var np = new OpenLayers.LonLat(posMarcador.lon, posMarcador.lat).transform(
            new OpenLayers.Projection("EPSG:4326"),  // from WGS 1984
            map.getProjectionObject()  // Spherical Mercator
        );
        addNewMarker(np);
    }
});

为了这个例子，我使用了new OpenLayers.Projection("EPSG:4326")之类的适当投影，而不是变量toProjection和fromProjection。也许这有帮助。

Openlayers - 缩放时标记消失

1 个答案: