google map v3 api 拖拽点击事件冲突答案

【问题标题】：google map v3 api drag and click event conflictgoogle map v3 api 拖拽点击事件冲突
【发布时间】：2012-09-22 18:56:33
【问题描述】：

我正在开发应用程序，只要用户点击地图，标记就会出现，用户可以为该标记插入自己的信息。

我搜索了很多 get the css positions where user clicked on the map，但 api 没有返回该信息。

所以我尝试了以下代码并且效果很好。

$("#map").bind('click', function(event) {

        event.preventDefault();
        event.stopPropagation();
        $("#map .floatText").remove();

    var this = obj;
    var event = e;
    var myMap   =   this.map;

    var myMarker    =   this.marker;

    var posX = $(obj).position().left, posY = $(obj).position().top;

    var divAdd = "<div class='floatText'><input type='text' id='addText' name='addText'><button id='addTextButton'>Add</buton></div>";

    $("#map").append(divAdd);

    $("#map .floatText").css('position', 'absolute').css('left', (e.pageX - posX)).css('top', (e.pageY - posY)).css('z-index', "1000").css('background-color', "#fff").css('padding', "5px").css('width', "auto").css('border', '2px solid #00AC71');


    $("#addText").focus();

    $("#addTextButton").bind('click', function(event) {

        event.stopPropagation();

        var track = $(".markersUl li:last").attr('data-track');

         var chHtml = $("#addText").val();
         // add an infowindow
         var chInfoWindow = new google.maps.InfoWindow({
            content : chHtml
         });

         chInfoWindow.open(myMap, myMarker[track]);



        $("#map .floatText").remove();

    });

    $("#addText").bind('click', function(event) {

        event.stopPropagation();

    });

    });

所以看起来如下

现在的问题是，当我拖动地图时，当我释放鼠标左键时会发生单击事件。

有什么解决方案吗？

【问题讨论】：

为什么要重新发明轮子。使用信息窗口见developers.google.com/maps/documentation/javascript/…
是的..我也在做同样的事情，但我允许用户在 infoWindow 中插入数据..

标签： javascript google-maps-api-3 onclick google-maps-markers drag

【解决方案1】：

对于那些从事谷歌地图相关项目并遇到这个问题的人来说，这可能与谷歌地图无关。在 JavaScript 中发生拖动或单击时，（至少）有 3 个事件按此顺序触发：mousedown、mouseup 和 click。所以当你拖动地图时，最后它也会触发一个click 事件。

查看此问题以获得针对此问题的不同解决方案：How to distinguish mouse "click" and "drag"。我个人遵循delta = 6的解决方案。

【讨论】：