【BingMaps】Infoboxへ埋め込んだDOMにイベントを設定する方法

【BingMaps】Infoboxへ埋め込んだDOMにイベントを設定する方法:

BingMapsのWebAPIを使ったとき、infobox内に差し込んだDOMにおいて、イベントが発生しませんでした。その解決策をご紹介します。

　※公式で用意されているinfobox(アクション付)

引用：BingMaps GO!|Infobox:Pushpin/event

動的に差し込んだDOMはイベントに反応しない！

どうしてもwebアイコンをinfoboxに入れたくて、下図のようにDOMを差し込みました。

map.js

mapPushpin(lat, lon, id, color, t, d) { 
    const location = new Microsoft.Maps.Location(lat, lon); 
 
    let infobox = this.mapInfobox(lat, lon); 
    let pin = new Microsoft.Maps.Pushpin(location, { 
      color: color 
    }); 
 
    pin.metadata = { 
      title: "店名", 
      description: '<i class="fas fa-camera-retro"></i>' 
    }; 
 
    Microsoft.Maps.Events.addHandler(pin, "click", e => { 
      if (e.target.metadata) { 
        infobox.setOptions({ 
          location: e.target.getLocation(), 
          title: e.target.metadata.title, 
          description: e.target.metadata.description, 
          visible: true 
        }); 
 
      } 
    }); 
 
    this.map.entities.push(pin); 
  } 

そしてクリックイベントを設定しようと思ったら問題が…。全く反応しないんです。documentをクリックしても無反応…。困ったので、色々調べてみました。

map.js

$(document).on("click", el => { 
  console.log(el.target); 
}); 
 

BingMapsにはイベントクラスがある

公式ページで、Microsoft.Maps.Eventsを使うと、イベントを設定できることが判明。

Events can be added and removed by using the methods available through the Microsoft.Maps.Events class. The Events class has the following static methods available.

引用：公式サイト：Events Class

ただ、イベント対象になるtargetの型はobject形式なので、DOMはダメっぽい…。

onchangeやonclickなどの属性を入れよう！

なので、DOMにonchangeやonclickを入れて解決しました。自分でクリックイベント後の処理を関数化すれば、バッチリ機能します！

参考になれば幸いです！

map.js

pin.metadata = { 
      title: "店名", 
      description: '<i class="fas fa-camera-retro" onClick='console.log("hello")'></i>' 
    }; 
 

参考URL

• BingMapsを簡単に使う関数を作る
• BingMaps GO!
• 公式サイト：Events Classの説明