【BingMaps】Infobox에 포함된 DOM에 이벤트를 설정하는 방법

BingMaps WebAPI를 사용했을 때 infobox에 꽂은 DOM에서 이벤트가 발생하지 않았습니다. 그 해결책을 소개합니다.

※공식으로 준비되어 있는 infobox(액션 첨부)

인용구 : BingMaps GO!|Infobox:Pushpin/event

동적으로 꽂은 DOM은 이벤트에 반응하지 않는다!

아무래도 웹 아이콘을 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 설명