Question

在不释放鼠标按钮的情况下将Google Maps中的可拖动多边形拖到特定位置，然后释放鼠标按钮而不进一步移动鼠标时，部分或全部多边形通常会移动一个像素。是否发生移位取决于地图缩放，多边形大小等未知组合。问题易于重现-对于给定的多边形，每一个总是存在多个缩放级别放下。

我已经检查过API版本3.33-3.35，并在多个桌面浏览器上验证了相同的问题。进一步的调查表明，在调用dragend处理程序之前，将对拖动处理程序进行最后调用（无论鼠标是否移动）。提供给拖动处理程序的latLng总是与上一个（实际）拖动事件提供的latLng不同，无论是否发生了多边形的视觉偏移。视觉上的偏移大概取决于某些幕后坐标到像素的舍入效果。当然，起初我以为也许我实际上是在释放拖动之前轻推鼠标，但是我已经证实事实并非如此。

可以通过创建任何可拖动的多边形，然后仔细查看在拖动，暂停然后放下时发生的情况来复制该问题。这是一个使用简单矩形的JSFiddle示例（https://jsfiddle.net/bipwap/70vup36n）：

var counter = 1;

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 4,
  center: { lat: 35.0, lng: -80.0 },
  mapTypeId: 'roadmap',
  gestureHandling: 'greedy'
});

// Define the LatLng coordinates for the polygon's path.
var testCoords = [
  {lat: 30.0, lng: -75.0},
  {lat: 40.0, lng: -75.0},
  {lat: 40.0, lng: -85.0},
  {lat: 30.0, lng: -85.0}
];

var testPolygon = new google.maps.Polygon({
  paths: testCoords,
  strokeColor: '#FF0000',
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: false // Problem evident with or without geodesic
});
testPolygon.setMap(map);

google.maps.event.addListener(testPolygon, 'drag', function(event) {
    console.log(counter++ + " drag Lat: " + event.latLng.lat() + " Lng: " + event.latLng.lng());
});

google.maps.event.addListener(testPolygon, 'dragend', function(event) {
    console.log(counter++ + " dragend Lat: " + event.latLng.lat() + " Lng: " + event.latLng.lng());
});

在默认缩放下，拖动结束时，矩形“多边形”的每一侧都会移动。在其他缩放级别下，任何，任何或所有侧面都不会移动。如果在运行代码时打开了控制台窗口，则可以通过诊断console.log（）调用来验证（a）在调用dragend处理程序之前，始终在调用拖动处理程序以及（b）latLng的坐标最后一次调用中的拖动处理程序总是与前一个拖动处理程序调用（与真正的拖动事件相关联）中的坐标不同。

那么这是怎么回事？为什么即使光标的像素坐标没有改变，拖动结束后，Google Maps仍会报告不同的地理坐标？

Google Maps多边形在Dragend事件上发生变化

0 个答案: