在 Chrome 设备模式下拖动结束之前，Google 地图拖动事件不会捕获中心更改答案

【问题标题】：Google Maps drag event doesn't capture center change until dragging ends in Chrome Device Mode在 Chrome 设备模式下拖动结束之前，Google 地图拖动事件不会捕获中心更改
【发布时间】：2016-03-02 14:58:20
【问题描述】：

我正在使用Angular Google Maps 在我的网络应用程序中包含地图。我正在收听成功触发的drag 事件，但地图的center 属性在拖动停止之前不会更新。这是预期的行为吗？我找不到任何要确认的文档。

$scope.map = {
    center: $scope.currentCoords,
    control: {},
    zoom: 15,
    events: {drag: function(m, e, args){mapDragged(m, e, args)}}
};

var mapDragged = function(map, eventName, args){
    console.log($scope.map.center); // this value only changes when dragging stops and restarts
}

更新

我尝试在此示例中使用本机谷歌地图事件，这些事件似乎捕捉到地图中心的变化，但这仍然不起作用。 'center_changed' 事件仅在拖动停止后触发，而不像 example 中那样

google.maps.event.addListener($scope.map.control.getGMap(), 'center_changed',function() {
    console.log($scope.map.control.getGMap().getCenter().toUrlValue());
});

更新 2

当我将 chrome 开发人员工具设置为设备模式时，看起来一切正常。预期用途是在移动设备上，因此需要找到一种方法来完成这项工作......

【问题讨论】：

我已经在 fiddle jsfiddle.net/w2wcbk84 上测试过 mapp 可能不知何故 drag event sops center_changed
请看我的第二次更新。似乎问题在于 Chrome 开发工具上的触摸事件。
老实说，我只是避免尝试将 Chrome 开发工具用作对移动设备的绝对完美测试。我发现有时非常简单的布局部分、Javascript 运行的感觉等在开发工具中没有得到很好的体现。这是一个很好的总体情况，但不适合 IMO 的具体情况。

标签： javascript google-maps google-maps-api-3 google-chrome-devtools angular-google-maps

【解决方案1】：

here 提出了关于同样行为的类似问题。

虽然我在 API 文档中找不到关于完整浏览器和设备之间差异的具体提及，但上述问题链接到特定于事件的 a Maps API example，它完全按照您的描述说明了行为。

在非设备模式下，center_changed 在地图被拖动时会继续触发。

在设备模式下，它不会。只有drag 和mousemove 会在地图被拖动时触发。我还在 Droid 和 iPhone 等实际设备上确认了这种行为。

既然如此，我会说可以安全地假设这是一种预期的行为，尽管没有记录。

【讨论】：

在设备模式下拖动会触发，但拖动时地图的中心不会改变
我认为问题出在触摸事件上。也许有一种方法可以通过模拟鼠标点击事件来解决这个问题？
几乎可以肯定有一种解决方法，但是您要做的是对 Maps 的 JS 进行逆向工程，以找出要触发的事件、何时触发以及您正在干扰什么当你这样做的时候。例如，我通过在drag 事件期间调用fitBounds() 方法（在内部更新地图中心）来快速解决这个问题。它成功更新了中心（不正确），但它干扰了正在进行的拖动操作并缩小了。

【解决方案2】：

如果您的问题（如我的问题）试图在用户将地图拖到移动设备上时重新加载，我有一个解决方法。不幸的是，地图图块仅在拖动结束时加载（与中心属性相同） - 这会导致非常糟糕的用户体验。

似乎我们无法改变这种行为，但是我帮自己解决了问题，将地图放在原始 div 内的更大 div 中，以便加载地图的更大部分并且用户看不到灰色拖动时的瓷砖。这是我为那个更大的 div 写的 CSS：

#map {
  width: 300%;
  height: 300%;
  top: -100%;
  left: -100%;
}

【讨论】：