Leaflet - Как добавить событие нажатия кнопки внутри маркера, всплывающего в приложении ioni c? - PullRequest
Новая
       11

Leaflet - Как добавить событие нажатия кнопки внутри маркера, всплывающего в приложении ioni c?

0 голосов
/ 21 марта 2020

Я пытаюсь добавить прослушиватель кликов для кнопки во всплывающем окне leaftlet в моем приложении ioni c.

Здесь я создаю карту и отображаю маркеры, а также Метод, который я хочу вызывать при щелчке тега заголовка, также находится ниже: 

 makeCapitalMarkers(map: L.map): void {
    let eventHandlerAssigned = false;

    this.http.get(this.capitals).subscribe((res: any) => {
      for (const c of res.features) {
        const lat = c.geometry.coordinates[0];
        const lon = c.geometry.coordinates[1];
        let marker = L.marker([lon, lat]).bindPopup(`
        <h4 class="link">Click me!</h4>
        `);
        marker.addTo(map);
      }
    });

    map.on('popupopen', function () {
      console.log('Popup Open')
      if (!eventHandlerAssigned && document.querySelector('.link')) {
        console.log('Inside if')        
        const link = document.querySelector('.link')
        link.addEventListener('click', this.buttonClicked())
        eventHandlerAssigned = true
      }
    })
  }

 buttonClicked(event) {
    console.log('EXECUTED');
  }

Когда я щелкаю этот заголовок, Открытое всплывающее окно & Внутри, если печатаются в консоль, поэтому я знаю, что я получаю внутри оператора If, но по какой-то причине функция buttonClicked () не выполняется.

Может кто-нибудь сказать, пожалуйста, почему это текущее поведение?

Ответы [ 2 ]

1 голос
/ 21 марта 2020

Я только что столкнулся с этой проблемой, как 2 часа go. Я не знаком с ioni c, но, надеюсь, это поможет.

Создайте переменную, которая отслеживает, есть ли у вашего всплывающего окна обработчик событий, уже прикрепленный к нему. Затем вы можете добавить прослушиватель событий на карту, чтобы прослушать всплывающее окно, открываемое с помощью map.on('popupopen', function(){}). Когда это происходит, содержимое DOM во всплывающем окне отображается и доступно для захвата с помощью querySelector или getElementById. Таким образом, вы можете настроить таргетинг на него и добавить к нему прослушиватель событий. Вам также нужно будет создать событие для map.on('popupclose', () => {}), и внутри него удалить прослушиватель событий из узла dom, к которому вы его подключили.

Это необходимо сделать для каждого уникального всплывающего окна. Вы создаете контент, к которому хотите добавить прослушиватель событий. Но, возможно, вы можете создать функцию, которая сделает это за вас. Вот пример: 

const someMarker = L.marker(map.getCenter()).bindPopup(`
  <h4 class="norwayLink">To Norway!</h4>
`)

someMarker.addTo(map)

function flyToNorway(){
  map.flyTo([
    47.57652571374621,
    -27.333984375
  ],3,{animate: true, duration: 5})

  someMarker.closePopup()
}

let eventHandlerAssigned = false

map.on('popupopen', function(){

  if (!eventHandlerAssigned && document.querySelector('.norwayLink')){
    const link = document.querySelector('.norwayLink')
    link.addEventListener('click', flyToNorway)
    eventHandlerAssigned = true
  }

})

map.on('popupclose', function(){
  document.querySelector('.norwayLink').removeEventListener('click', flyToNorway)
   eventHandlerAssigned = false
})

Вот как я нацелился на всплывающее содержимое и добавил ссылку на него в демоверсии для моего плагина .

0 голосов
/ 21 марта 2020

Так что да, вы не можете сделать (щелкнуть) привязку события, просто добавив stati c HTML. Один из способов добиться того, чего вы хотите, - добавить слушателей после добавления этого нового элемента dom, см. Псевдокод ниже: 

makeCapitalMarkers(map: L.map): void {
    marker.bindPopup(this.popUpService.makeCapitalPopup(c));
    marker.addTo(map);
    addListener();
}

makeCapitalPopup(data: any): string {
    return `` +
        `<div>Name: John</div>` +
        `<div>Address: 5 ....</div>` +
        `<br/><button id="myButton" type="button" class="btn btn-primary" >Click me!</button>`
}

addListener() {
    document.getElementById('myButton').addEventListener('click', onClickMethod
}

В идеале с Angular мы не должны напрямую работать с DOM, так что если вышеуказанный подход работает, вы можете изменить рефакторинг, добавив прослушиватель событий через Renderer.

Также я не знаком с библиотекой Leaflet - но для работы вышеупомянутого подхода необходимо учитывать любые асинхронные c методы (если любой), так что вы вызывали getElementById только после того, как такой элемент DOM был успешно добавлен в DOM.

...