Question

您好我有3个按钮，分别是1.ADD，2.EDIT，3.DELETE .....和一张id = comp_map的地图......我正在使用Open Street Maps ....

function addComp() {

     $("#comp_map").click(function() {
          if (event.type !== 'mousemove') {
                var containerPoint = comp_map.mouseEventToContainerPoint(event),
                layerPoint = comp_map.containerPointToLayerPoint(containerPoint),
                latlng = comp_map.layerPointToLatLng(layerPoint)            
                alert("Marker Location: "+latlng);
            }
    });


}

   function editComp() {
        // disable the map click
    }

    function delComp() {
        // disable the map click
    }

我的问题是我希望$("#comp_map").click仅在单击添加按钮时才能工作...但是当点击编辑，删除等其他按钮时，此功能不起作用...这是正确的方法吗如果我的方法有误，请纠正我......谢谢......！

Answer 1

因此，您需要跟踪应用程序/按钮的状态，以便在单击地图时，您可以根据该状态以不同方式处理交互：

在你的JS中

$(function() {
  //set default action to add. If no default set action = false
  var action = 'add';
  //Bind to button clicks and update stored state
  $('body').on('click', 'button', function(e){
    var newAction = $(e.target).data('action');
    if ($(e.target).data('action')) {
      action = newAction;
    }
  });
  //bind to map clicks and handle based on current action state
  $("#comp_map").click(function(e) {
    //you might want this conditional in your addComp() fn depending on what you need in editComp()/delComp()
    if (e.type !== 'mousemove') {
      e.preventDefault();
      switch (action) {
         case "add": 
            addComp(e);
            break;
         case "edit":
            editComp(e);
            break;
         case "delete":
            delComp(e);
            break;
         default:
            return false
            break;
      }
    }
  })
  function addComp(e) {
      var containerPoint = comp_map.mouseEventToContainerPoint(event),
        layerPoint = comp_map.containerPointToLayerPoint(containerPoint),
        latlng = comp_map.layerPointToLatLng(layerPoint)            
        alert("Marker Location: "+latlng);
  }
  function editComp(e) {
      // disable the map click
  }
  function delComp(e) {
      // disable the map click
  }
});

然后在您要选择的操作的HTML集数据属性中（您还可以在单击时设置selected类以显示当前操作：

<button data-action="add">Add</button>
<button data-action="edit">Edit</button>
<button data-action="delete">Delete</button>

如何仅在单击特定条件时启用功能

1 个答案: