标记移动时捏以缩放打开的图层和谷歌地图答案

【问题标题】：markers move while pinch to zoom open layers and google maps标记移动时捏以缩放打开的图层和谷歌地图
【发布时间】：2014-07-15 07:10:14
【问题描述】：

我将 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}
  }

提前致谢

【问题讨论】：

你是说他们不应该在紧要关头发生时移动吗？你有什么代码可以看吗？
不，它就像地图保持不变，只有标记在移动，或者它们在捏合时变大，在捏合释放时它们会调整回原来的形式
喜欢放大这个例子，openlayers.org/dev/examples/markers.html，但是为了捏？地图会立即调整大小，然后标记？
类似这样，但在我的情况下，地图不会重新调整大小，而是放大一个级别，但标记会重新调整大小。
我不确定我是否在关注。这听起来像是正确的行为。地图首先缩放，然后以像素的原始大小重新绘制标记。当您放大/缩小时，您是否希望标记变大/变小。

标签： cordova google-maps-api-3 openlayers

【解决方案1】：

在 OpenLayers 2 中，在缩放/移动完成之前不会重绘矢量特征。如果您查看 Map source 中 moveTo 的代码，您会看到所有层都有自己的 moveTo 事件调用，它实际上会重绘矢量，请参阅 Layer Vector source。如果您绘制一个大多边形，然后将其拖到屏幕的一半，释放鼠标，然后将其拖回屏幕上，这一点会更加明显，您会看到它在释放鼠标之前不会重绘。

 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, 因此，虽然它看起来将是一个非常令人印象深刻的重写，并包含许多新功能，但我现在不一定推荐它用于生产。

【讨论】：