Javascript 谷歌地图JS：无需移动标记即可缩放谷歌地图（如Uber&；Lyft）

我目前正在与谷歌的MapJSAPI一起构建一个Phonegap应用程序

我有一张地图，你可以拖动它来选择你的下车地点。这是通过在“dragend”事件中收集地图的中心地理位置来实现的。然后，我在地图的顶部（JS地图的外部）设置一个pin，以便您知道中心点在哪里

一切都很好，直到你捏缩放，然后引脚位移。这是因为在挤压屏幕的同时缩放和拖动地图

有没有办法防止在缩放时拖动以将地图保持在其中心点？

---

编辑：ProllyGeek是对的，zoom_changed事件在拖动已经发生后触发。您可以检测触摸事件是否靠近地图中心（在标记上），并在缩放后重新居中地图：

google.maps.event.addListener(map, 'dragend', function() {
    if (center && center != map.getCenter()) {
        map.setCenter(center);
        center = null;
    }
});

//we should recenter the map if the click/mousedown was within the centerRadius of the center of the map
google.maps.event.addListener(map, 'mousedown', function(clickMouseEvent) {
    var mapDiv = document.getElementById('map');

    if (pointInCircle(clickMouseEvent.pixel.x, 
                      clickMouseEvent.pixel.y, 
                      mapDiv.offsetWidth/2, 
                      mapDiv.offsetHeight/2, 
                      centerRadius)) { 
        //map.setOptions({draggable: false}); //disables zoom and dragging
        center = map.getCenter(); //save the current center point so we can recenter later.
    }
});

//handy function to see if a x,y coordinate is within z radius of another x,y coordinate
//from https://stackoverflow.com/a/16819053/1861459
function pointInCircle(x, y, cx, cy, radius) {
    var distancesquared = (x - cx) * (x - cx) + (y - cy) * (y - cy);
    return distancesquared <= radius * radius;
}

您可以通过mouseup事件（）或在您的用例中有意义的任何东西以编程方式重新启用拖动（

map.setOptions（{draggable:true}）；

）。例如：

google.maps.event.addListener(map, 'mouseup', function() {
    map.setOptions({draggable: true});
});

---

我在桌面上测试，所以我稍微调整了一下小提琴，因为地图没有为我加载-假设这是因为window.load在

$（document.ready）（function（）{…}之后没有被激发

。如果拖动在缩放事件之前启动，您将必须了解其行为。

根据我所了解的，您尝试使用本机标记，但它滞后，这本身就是另一个问题，我有一个建议：

用于构建你的应用程序，这将极大地提高你的应用程序性能，我自己也经历过，并且对结果非常满意（我使用intel xdk，但我相信这也适用于phonegap）

使用UX解决方案：你会觉得标记滞后，因为毕竟它是可见的！！我建议在拖动事件开始时隐藏标记，然后在拖动事件结束时显示它

第三个有意义的解决方案是使用夹点检测器库，如，，甚至是提到的和的解决方案，选择最适合您的解决方案，因为性能是一个关注点，一旦检测到夹点，就必须尝试以前的解决方案在手势中，将贴图拖动设置为false，然后在挤压结束后将其再次设置为true

---

我通常不会在解决方案中提供太多的编码，而是提供正确的算法来帮助解决指定的问题。

我有一个可行的解决方案。假设您希望地图居中回到pin

在地图对象中添加div。示例为。将pin设置为控制div，而不是示例中的“中心地图”div。收听

dragend

事件，将中心设置在pin的位置

---

还没有真正测试过这个解决方案，但似乎它会起作用。

问题：1）为什么不使用一个位于同一位置的

google.map.Marker

？2） 这应该只发生一次还是每次用户停止拖动地图时都发生；使用叠加标记而不是实际标记，因为如果在拖动地图时将标记位置更新到地图中心，标记会滞后/跳跃。标记会滞后/跳跃吗？我看不出会发生这种情况的原因。@MrUpsidown这里是一个例子：它在移动设备上的性能更差，并且在您按比例缩放时会遇到相同的标记移动问题。嘿，向下投票者-请帮助我理解这为什么不能回答问题“有没有办法防止在缩放时拖动以将地图保持在其中心点？“我在我的代码中突然出现了这个，但它并没有按预期的那样执行。好主意，只是在实践中不起作用。你能解释一下你遇到的问题吗？我正在做一个编辑，它使用mouseup事件重新启用draggable属性-您可能想检查一下。仅供参考：“当你遇到一篇极其草率、不费力气的帖子，或者一个明显而且可能危险地错误的答案时，请使用你的否决票。”我没有否决你。我只对你的代码发表了评论。对不起，误会了，不用担心！有人想要那笔赏金；）-无论如何，请告诉我您对建议的方法有什么问题，以及mouseup方法是否适用于重新启用地图的draggable属性。

google.maps.event.addListener(map, 'zoom_changed', function() {
    map.setOptions({draggable: false});
    //heavy handed re-enabling of draggable
    //setTimeout(function() { map.setOptions({draggable: true}); }, 5000); //cant drag for five seconds
});

google.maps.event.addListener(map, 'mouseup', function() {
    map.setOptions({draggable: true});
});