Javascript 谷歌地图禁止用户对所有事件进行平移

Google Maps Disable user panning on all events

提问by georgephillips

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.

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

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 disableDoubleClickPanand disableScrollwheelPanor the draggableoption actual prevents all dragging of any kind

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

EDIT

编辑

This is for all devices, desktop and mobile.

这适用于所有设备，台式机和移动设备。

采纳答案by georgephillips

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.

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

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

为了区分它们，我检查了 window 对象中的 ontouchstart 事件。

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

The zoom_changedor idleevents where not really an option for a few reasons:

由于以下几个原因，zoom_changed或idle事件并不是真正的选择：

1. The idleevent 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_changedevent 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.

1. 该idle事件仅在地图空闲时被调用，并且我正在执行的动画量从未被调用过。
2. 每一步的动画都会在跟随的标记上重新居中地图，因此zoom_changed事件将在动画帧之前调用重中点。
3. 由于动画的数量，不平移到中心的想法是减少动画帧并提高性能。

回答by GoldenLight

Here is how I did it:

这是我如何做到的：

var options = {
    draggable: false,
    scrollwheel: false,
    panControl: false,
    maxZoom: Zoom,
    minZoom: Zoom,
    zoom: Zoom,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

As you can see, setting maxZoom and minZoom to the same value helps block user's double click event.

如您所见，将 maxZoom 和 minZoom 设置为相同的值有助于阻止用户的双击事件。

回答by Andrew Leach

While it's possible to argue that double-clicking the map or wheel-zooming the map need not take account of the mouse location (because you are acting on the map object rather than a location on the map), pinch-to-zoom is alwayslocation-dependent because you physically stretch or squash the map around a location. To alter that behaviour would be distinctly unintuitive.

虽然可能会争辩说双击地图或滚轮缩放地图不需要考虑鼠标位置（因为您正在对地图对象而不是地图上的位置进行操作），但捏合缩放总是位置相关，因为您在某个位置周围物理拉伸或挤压地图。改变这种行为显然是不直观的。

In this case you should listen for zoom_changedor idleand then pan the map to recentre it, so the user can see what's going on.

在这种情况下，您应该侦听zoom_changed或idle然后平移地图以重新定位它，以便用户可以看到发生了什么。

You couldeven use those events to handle the default double-click or mousewheel behaviour so that it's obvious you are changing the level of control the user normally has.

您甚至可以使用这些事件来处理默认的双击或鼠标滚轮行为，这样很明显您正在更改用户通常拥有的控制级别。