在缩放图层和谷歌地图时移动标记

Question

我使用的是OpenLayers和Google Layer，我对地图上的标记有一个奇怪的行为。

在移动设备上，当在地图上执行缩放操作时，标记会随着缩放操作的发生而移动和缩放，但是当缩放完成后，标记会回落到正确的位置并保持其实际大小。

var map;
var markers_array=new Array();
var markers;
var proj = new OpenLayers.Projection("EPSG:4326");
var markersJSON;

function initlize()
{
map = new OpenLayers.Map('map', {
    projection: 'EPSG:3857',
maxResolution: "auto",
zoomDuration:0,
    layers: [
        new OpenLayers.Layer.Google(
            "Google Streets", // the default
            {numZoomLevels: 20,transitionEffect:"resize"}
        ),
    ],
      center: new              OpenLayers.LonLat(parseFloat(markersJSON[0].lon),parseFloat(markersJSON[0].lat))
.transform('EPSG:4326', 'EPSG:3857'),
        // Google.v3 uses web mercator as projection, so we have to
        // transform our coordinates

    zoom: 12,
        controls: [
      new OpenLayers.Control.TouchNavigation({
          dragPanOptions: {
              enableKinetic: true
          }
      }),
      new OpenLayers.Control.Zoom()
      ]
});
function addMarker(lat,lng,id,map_icon)
 {

markers = new OpenLayers.Layer.Markers( "Markers" );
//markers_array[id]=markers;
var lonlat = new OpenLayers.LonLat(lat,lng);
lonlat.transform('EPSG:4326', 'EPSG:3857');
map.addLayer(markers);
markers.id=id;
var size = new OpenLayers.Size(40,60);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('server_address'+map_icon, size, offset);
markers.addMarker(new OpenLayers.Marker(lonlat,icon));
markers.events.register( 'touchstart', markers,clickMarker);
//markers_array[id]=markers;
}
function clickMarker(evt){
  //{some code here}
  }

Thanks in advance

Answer 1

在OpenLayers 2中，矢量特征在缩放/移动完成之前不会重新绘制。如果你在Map源代码中查看moveTo的代码，你会看到所有的图层都有自己的moveTo事件被调用，它实际上重新绘制了向量，参见Layer Vector源代码。如果你画一个大多边形，然后把它拖到屏幕的一半，松开鼠标，然后把它拖回屏幕，你会看到它不会重新绘制，直到你松开鼠标。

 if (inRange && layer.visibility) {
      layer.moveTo(bounds, zoomChanged, options.dragging);
      options.dragging || layer.events.triggerEvent(
      "moveend", {zoomChanged: zoomChanged}
       );
 }

在OpenLayers 3中，渲染器更强大，当地图缩放或平移时，向量会得到更新。我创建这个jsFiddle是为了回答一个不同的问题，但您会看到图标立即更新。

注意:我只在Android手机和Linux桌面上测试过，但两者都能正常工作。

Note: OpenLayers 3 is still in beta, 因此，虽然它看起来将是一个非常令人印象深刻的重写，具有许多新功能，但我现在不一定推荐它用于生产环境