Question

我在我的angular 6应用程序中实现了@ asymmetrik / ngx-leaflet，除了弹出窗口之外，其他一切都正常。在地图上显示了一些标记后，它的显示如图所示：marker popup

我想在用户单击按钮时更改路线，但是在单击事件中从角度触发（click）事件而不在click事件中触发时，我已经在onClick及其调用中实现了内联函数javascript，然后单击弹出窗口尽可能多的地图有标记！所以它不起作用。代码是这样的：

class result
{
   decimal result1;
   decimal? result2;
   .......
}

谢谢。

Answer 1

我为正在开发的应用做了类似的事情，并使它像这样工作：

.bindPopup(`
    <div align='center'>
    <a class="btn btn-primary button-raised partner-link" data-partnerId="${markerinfo.partnerId}">
      ${markerinfo.partnerName}</a>
      <p style='font-size:14px;margin: 5px'>${markerinfo.partnerAddress}</p>
      <img style="height: 100px; width: 170px; margin: 0" src="${markerinfo.descImg}">
      <p style="margin:5px;font-style:italic">${markerinfo.descText}</p>
    </div>
  `).addTo(map)
          .on('popupopen', function () {
            self.elementRef.nativeElement.querySelector('.partner-link')
              .addEventListener('click', (e) => {
                const partnerId = e.target.getAttribute('data-partnerId');
                self.showPartner(partnerId);
              });
          })

showPartner(partnerId) {
// this.router.navigate(['/app/partners' + '/' + partnerId]);
console.log('going to partner: ' + partnerId);
}

Answer 2

Angular 9的答案：

export class MapComponent implements OnInit {

...

//whenever we do click, if element clicked has class "goOrigin" then execute this.goOrigin
  @HostListener('document:click', ['$event']) 
  clickout(event) 
  { 
    if(event.target.classList.contains("goOrigin"))
      this.goOrigin(); 
  }

...

//Just bind a text to your marker
let text: string = "<a href='#' class='goOrigin'>Usar de origen ></a>";
this.markerPoint = L.marker([latitude, longitude]);
this.markerPoint.addTo(this.map).bindPopup(text);

...

  goOrigin()
  {
    console.log('origen');
  }

来源：https://github.com/Asymmetrik/ngx-leaflet/issues/60#issuecomment-493716598

Angular Leaflet Popup单击不起作用？

2 个答案: