1

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

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

    });

    });

所以这看起来如下

在此处输入图像描述

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

对此有任何解决方案吗？

4

1 回答 1

0

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

看看这个问题，了解这个问题的不同解决方案：如何区分鼠标“点击”和“拖动”。我个人遵循了delta = 6解决方案。

于 2021-11-01T01:32:32.287 回答