我的app需要leaflet的帮助。首先让我解释一下我的问题,
我在标记弹出窗口中插入了Chart JS元素。当我点击标记时,它向我显示了我为弹出窗口创建元素的所有DOM
元素。但是当我在关闭当前弹出窗口之前单击其他标记时,Chart
元素工作正常。仅Chart
元素发生故障..而不是其他DOM
元素。
我试图讲述的截图如下。
第一张图片解释当我点击一个标记时所有弹出窗口全部关闭。
第二张图片是标记打开时的颜色..
如您所知,此canvas元素是我的Chart元素。
let title="<div style='margin-left:10px;'><canvas style='clear:both;
position: relative;' id='myChart'></canvas></div>";
let marker = L.marker([parseFloat(poiData.lat), parseFloat(poiData.lon)],{
data:{poiData,polyline}
});
marker.unbindPopup().bindPopup(title, {
autoPan:true,
maxWidth: "auto"
}).openPopup();
marker.addTo(this.iconLayer);
marker.on("click", (event: MouseEvent) => {
let ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'Grafik',
data: [2, 29, 5, 5, 2, 3, 10],
backgroundColor: "rgba(255,153,0,0.4)"
}]
},
options: {
responsive: true
}
});
});
请您建议我解决这个问题的方法吗?