Google地图停用所有事件的用户平移 [英] Google Maps Disable user panning on all events

问题描述

在我的谷歌地图应用程序中，我有一个遵循移动标记的跟踪方法。当它跟随时，我想允许缩放所有常用方法（dblclick，dblleftclick，mousewheel和touch事件），并且我想禁用任何类型的平移。问题是，在使用鼠标滚轮和dblclick进行缩放时，地图会被移动到鼠标位置。我可以禁用一切正常，但我想允许缩放。我已经通过使用jquery mousewheel插件并使用delta来更改缩放来解决mousewheel问题。

是否有一些简单的方法可以执行此操作，还是必须编写所有不同的触摸和鼠标事件的监听器？

编辑

我已禁用双击鼠标滚轮缩放和拖动，但我想双击功能仍然存在。我也希望触摸事件发生在那里，但我希望让它们从中心缩放而不是事件发生的位置。真正的问题是复制谷歌已经处理的事件，但改变了一些功能

  var options = {
 disableDoubleClickZoom ：true，
 draggable：false，
 scrollwheel：false，
 panControl：false 
}; 
 
 this.map = new google.maps.Map（document.getElementById（'map'），options）; 
  

我的理想解决方案是如果有 disableDoubleClickPan 和 disableScrollwheelPan 或 draggable 选项实际上可以防止任何类型的所有拖动

编辑

这适用于所有设备，台式机和手机。 解决方案

我最终选择了一个组合。首先，我必须重写发生的桌面事件才能获得我的成果（触摸，双击，双击左键和鼠标滚轮）。

在触摸屏设计中，当有两次以上的触摸时，我暂停了对标记的所有更新。这意味着当缩放操作时，任何捏事件都不会跳来跳去。

在普通的Web桌面设备上，我禁用了地图上的缩放和双击事件，并重写了自己的事件处理程序。

$ b $为了区分它们，我在窗口对象中检查了ontouchstart事件。

  function setDraggable（draggable）{
 if（ontouchendin document）{
 return; 
} 
 var options = {
 draggable：draggable，
 panControl：draggable，
 scrollwheel：draggable 
}; 
 this.map.setOptions（options）; 
}，
  

zoom_changed 或空闲事件，其中有几个原因不是真正的选择：

1. idle 事件只有在地图空闲时才会被调用，而且我从来没有调用这个动画。
每个步骤都会重新映射后续标记上的地图，因此 zoom_changed 事件将在动画帧之前调用recenter。

2. 由于动画的数量不是平移到中心的想法是减少动画帧并提高性能。

In my google maps application I have a follow method which follows a moving marker. When it is following I want to allow zooming through all the usual methods (dblclick, dblleftclick, mousewheel and touch events) and I want to disable panning of any kind. The problem is that on zoom with mousewheel and dblclick the map gets panned to the position of the mouse. I can disable everything just fine but I want to allow zooming. I have solved the mousewheel problem by using the jquery mousewheel plugin and using the delta to change the zoom.

Is there some easy way to do this or do I have to write a listener for all the different touch and mouse events?

EDIT

I have already disable double click, mousewheel zooming and dragging but I want to have the double click functionality still there. I also want the touch events there but I want to have them zoom from the centre rather than from where the event happened. The real problem is replicating the events which google already handle but change the functionality a bit

var options = {
    disableDoubleClickZoom: true,
    draggable: false,
    scrollwheel: false,
    panControl: false
};

this.map = new google.maps.Map(document.getElementById('map'), options);

My ideal solution would be if there was a disableDoubleClickPan and disableScrollwheelPan or the draggable option actual prevents all dragging of any kind

EDIT

This is for all devices, desktop and mobile.

解决方案

I have ended up going with a combination of options. Firstly I had to override desktop events which occurred to get my achieved result (touch, double click, double left click, and mouse wheel).

On a touch screen devise I paused all updates to the markers when there were more than two touches. this meant that any pinch event was not jumping around when the zoom operating.

On a normal web desktop device I disabled the zoom and double click events on the map and rewrote my own event handlers.

To distinquish between them I checked for the ontouchstart event in the window object.

function setDraggable(draggable) {
    if ("ontouchend" in document) {
        return;
    }
    var options = {
        draggable: draggable, 
        panControl: draggable, 
        scrollwheel: draggable 
    };
    this.map.setOptions(options);
},

The zoom_changed or idle events where not really an option for a few reasons:

1. The idle event only gets called when the map is idle and with the amount of animation I was doing this never got called.
2. The animation at each step recentered the map on the followed markers so the zoom_changed event would be recalling the recenter before an animation frame.
3. due to the amount of animation the idea of not panning to the center is to reduce animation frames and improve performance.

这篇关于Google地图停用所有事件的用户平移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！