ユーザーが最後にクリックしたボタンに接続されている関数のみを実行する

Question

アプリケーションに3つのボタンがあり、ユーザーがクリックするボタンによって異なるアイコンをマップに追加できるようにします。私が持っていた問題は、ユーザーが最初にbutton1をクリックしてからbutton2をクリックすると、ユーザーがマップをクリックしたときに両方の関数が実行されるということでした。私は、ユーザーが最後にクリックしたボタンに接続されている関数を実行したいだけです。それで、私は次のコードを書いたのです。私はこのコードがなぜ機能しないのか、そしてこの問題を処理する最も賢明な方法は何だろうと思います。

 var latestClick; //The variable to check which button the user clicked the last time 

    On(button1, "click", function(evt){ 
     latestClick = "button1"; 
    }); 

    On(button2, "click", function(evt) { 
     latestClick = "button2"; 
    }); 

    On(button3, "click", function(evt) { 
     latestClick = "button3"; 
    }); 

     if(latestClick == "button1") { 
      On(map, "click", function(evt){ 
       PictureMarkerSymbol = new PictureMarkerSymbol("images/info/info.png", 20, 20); 
       mapPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint); 
       pointClick = new Graphic(new Point (evt.mapPoint), PictureMarkerSymbol); 
       graphics.add(pointClick); 
       name = prompt("Vad vill du ange för namn för denna punkt"); 
       info = prompt("Vänligen mata in information till punkten"); 
       url = prompt("Bifoga gärna en bild på informationspunkten"); 
       pointClick = pointClick.setInfoTemplate(new InfoTemp(name, info + "<br>" + "<img src = " + url + ">")); 
      }); 
     } 

     else if(latestClick == "button2") { 
      On(map, "click", function(evt){ 
       PictureMarkerSymbol = new PictureMarkerSymbol("images/rastplats/rastplats.png", 20, 20); 
       mapPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint); 
       pointClick = new Graphic(new Point (evt.mapPoint), PictureMarkerSymbol); 
       graphics.add(pointClick); 
       name = prompt("Ange namn på rastplatsen"); 
       info = prompt("Ange information för rastplatsen"); 
       url = prompt("Bifoga en bild på rastplatsen"); 
       pointClick = pointClick.setInfoTemplate(new InfoTemp(name, info + "<br>" + "<img src = " + url + ">")); 
      }); 
     } 

     else if(latestClick == "button3") { 
      On(map, "click", function(evt){ 
       PictureMarkerSymbol = new PictureMarkerSymbol("images/matplats/matplats.png", 20, 20); 
       mapPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint); 
       pointClick = new Graphic(new Point (evt.mapPoint), PictureMarkerSymbol); 
       graphics.add(pointClick); 
       name = prompt("Skriv namn på matplatsen"); 
       info = prompt("Ange information för matplatsen"); 
       url = prompt("Länka en bild på matplatsen"); 
       pointClick = pointClick.setInfoTemplate(new InfoTemp(name, info + "<br>" + "<img src = " + url + ">")); 
      }); 
     } 

Answer 1

私はウィルに同意します。共有されたコードにはフルフローが表示されません。ボタンの1つがクリックされるまで、latestClickが未定義になるため、マップイベントのどれも初期化されていないようです。

ボタンをクリックした後、マップイベントの初期化を呼び出すロジックがあるとします。あなたはそれを一度呼び出さないように見えるので、複数のマップクリックハンドルが作成されます。マップのクリックイベントを再度設定する前に、以前に設定したハンドルを破棄する必要があります。以下のように。

var mapClickHandle; 
    if(latestClick == "button1") { 
     mapClickHandle && mapClickHandle.remove(); 
     mapClickHandle = On(map, "click", function(evt){ 
      PictureMarkerSymbol = new PictureMarkerSymbol("images/info/info.png", 20, 20); 
      mapPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint); 
      pointClick = new Graphic(new Point (evt.mapPoint), PictureMarkerSymbol); 
      graphics.add(pointClick); 
      name = prompt("Vad vill du ange för namn för denna punkt"); 
      info = prompt("Vänligen mata in information till punkten"); 
      url = prompt("Bifoga gärna en bild på informationspunkten"); 
      pointClick = pointClick.setInfoTemplate(new InfoTemp(name, info + "<br>" + "<img src = " + url + ">")); 
     }); 
    } 
    else if(latestClick == "button2") { 
     mapClickHandle && mapClickHandle.remove(); 
     mapClickHandle = On(map, "click", function(evt){ 
      PictureMarkerSymbol = new PictureMarkerSymbol("images/rastplats/rastplats.png", 20, 20); 
      mapPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint); 
      pointClick = new Graphic(new Point (evt.mapPoint), PictureMarkerSymbol); 
      graphics.add(pointClick); 
      name = prompt("Ange namn på rastplatsen"); 
      info = prompt("Ange information för rastplatsen"); 
      url = prompt("Bifoga en bild på rastplatsen"); 
      pointClick = pointClick.setInfoTemplate(new InfoTemp(name, info + "<br>" + "<img src = " + url + ">")); 
     }); 
    } 
    else if(latestClick == "button3") { 
     mapClickHandle && mapClickHandle.remove(); 
     mapClickHandle = On(map, "click", function(evt){ 
      PictureMarkerSymbol = new PictureMarkerSymbol("images/matplats/matplats.png", 20, 20); 
      mapPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint); 
      pointClick = new Graphic(new Point (evt.mapPoint), PictureMarkerSymbol); 
      graphics.add(pointClick); 
      name = prompt("Skriv namn på matplatsen"); 
      info = prompt("Ange information för matplatsen"); 
      url = prompt("Länka en bild på matplatsen"); 
      pointClick = pointClick.setInfoTemplate(new InfoTemp(name, info + "<br>" + "<img src = " + url + ">")); 
     }); 
    }