google map v3 api拖动并单击事件冲突

时间:2012-09-22 18:56:33

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

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

我搜索了很多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();

    });

    });

所以这看起来如下

enter image description here

现在问题是,只要我拖动地图,当我释放鼠标左键时就会发生点击事件。

对此有何解决方案?

0 个答案:

没有答案