0

こんにちは、私は 1.ADD 、 2.EDIT 、 3.DELETE と呼ばれる 3 つのボタンを持っています。

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 に答える