为什么需要单击两次才能运行功能?

时间:2018-11-30 12:24:14

标签: javascript jquery leaflet

我正在使用传单地图,并在上面绘制一些标记,当我单击一个圆时,我会运行一个提交表单。这是我正在使用的以下代码。

JS

    // We draw the markers
    function drawMarkers() {

      if(stopAjax == false) {
        L.MarkerCluster.include({
          spiderfy: function(e) {
            var childMarkers = this.getAllChildMarkers();
            this._group._unspiderfy();
            this._group._spiderfied = this;
            if(childMarkers.length == 2) {
              clickMarkers();
            }
          },
          unspiderfy: function() {
            this._group._spiderfied = null;
          }
        });

        var mcg = L.markerClusterGroup().addTo(map);
        circles = new L.MarkerClusterGroup();

        map.on("zoomend", function(){
          zoomLev = map.getZoom();
          console.log(zoomLev);
          if (zoomLev == 11){
            clickMarkers();
          }
        });

        function clickMarkers() {
          console.log("hello"); 
          circles.on('clusterclick', function (e) {
            $("#longiTude").val(e.latlng.lng);
            $("#latiTude").val(e.latlng.lat);
            submitSearchForm();
          },this);
        }

        for (var i = 0; i < coords.length; i++) {
          var circle = new L.CircleMarker(coords[i].split(','))
          circles.addLayer(circle);
          circle.on('click', function (e) {
            var curPos = e.target.getLatLng();
            $("#longiTude").val(curPos.lng);
            $("#latiTude").val(curPos.lat);
            submitSearchForm();
          });
        }
        // we add the markers to the map
        map.addLayer(circles);
        // we empty the arrays for the future calls
        coords = [];
        // we set again stopAjax var to true to reset
        stopAjax = true;   
      }
    }

但是在点击功能上,我需要先单击两次,然后才能提交表单。奇怪的是,console.log()第一次点击就发生了

        function clickMarkers() {
          console.log("hello"); 
          circles.on('clusterclick', function (e) {
            $("#longiTude").val(e.latlng.lng);
            $("#latiTude").val(e.latlng.lat);
            submitSearchForm();
          },this);
        }

2 个答案:

答案 0 :(得分:1)

通过删除

解决了该问题
function clickMarkers() {
  circles.on('clusterclick', function (e) {
    $("#longiTude").val(e.latlng.lng);
    $("#latiTude").val(e.latlng.lat);
    submitSearchForm();
  },this);
}

并替换

        if(childMarkers.length == 2) {
          clickMarkers();
        }

使用

if(childMarkers.length == 2) {
   submitSearchForm();
}

答案 1 :(得分:0)

我不确定,但是我认为这是因为您在一个函数内定义了一个事件,而该函数在另一个函数内。