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

Google Maps drag event doesn't capture center change until dragging ends in Chrome Device Mode

本文关键字：拖动 Chrome 结束 模式 事件 地图 Google      更新时间：2023-09-26

我正在使用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'事件仅在拖动停止后触发，而不是像示例中那样触发 

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

更新 2

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

这里提出了关于相同行为的类似问题。

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

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

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

在这种情况下，我会说可以安全地假设这是一种预期的，尽管没有记录的行为。

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

似乎我们无法改变这种行为，但是我通过将地图放在原始div 中的较大div 中来帮助自己，以便加载地图的更大部分并且用户在拖动时看不到灰色瓷砖。这是我对那个更大div的css：

#map {
  width: 300%;
  height: 300%;
  top: -100%;
  left: -100%;
}
相关文章：