我正在使用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%;
}