0

嗨，我有 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在单击添加按钮时工作...但是当单击其他按钮（例如编辑，删除）时，此功能不应该工作...这是正确的方法还是我的方法是错误的纠正我...谢谢...！

4

1 回答 1

0

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

在你的 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>
于 2012-11-01T15:53:32.620 回答