Javascript 如何将此链接到传单上的活动？

我在html/css中找到了一个漂亮的按钮，我把它添加到了我的传单地图上。（将行添加到我以前的代码中）

我被阻止是因为这不是一个真正的

，我在Stackoverflow上找不到回答我问题的任何东西：(

我想添加任何使用Javascript的函数，即使是一个简单的函数，比如单击按钮时添加一个弹出窗口，或者任何与添加一点交互性相关的函数，比如单击按钮时，地图的特定位置上的缩放

我只是想知道如何将这个按钮链接到JavaScript

在我的代码下面找到我想要链接到函数的部分

@导入url（'https://fonts.googleapis.com/css?family=Poppins:900i');
* {
框大小：边框框；
}
身体{
高度：100vh；
显示器：flex；
证明内容：正确；
对齐项目：右对齐；
}
.包装纸{
显示器：flex；
证明内容：中心；
z指数：10000；
}
.cta{
右：自动；
左边距：500px；
顶部：520px；
位置：相对位置；
左：500px；
显示器：flex；
填充：3px31px；
文字装饰：无；
字体系列：“Poppins”，无衬线；
字体大小：30px；
颜色：白色；
背景：#ffa500；
过渡：1s；
盒影：6px 6px 0黑色；
变换：skewX（-15度）；
}
.cta：焦点{
大纲：无；
}
.cta:悬停{
过渡：0.5s；
盒影：10px 10px 0#FBC638；
}
.cta跨度：第n个孩子（2）{
过渡：0.5s；
右边距：0px；
}
.cta:悬停跨度：第n个子项（2）{
过渡：0.5s；
右边距：45像素；
}
跨度{
变换：斜交（15度）
}
跨度：第n个孩子（2）{
宽度：20px；
左边距：30px；
位置：相对位置；
最高：12%；
}
/**************SVG****************/
路径一{
过渡：0.4s；
转化：translateX（-60%）；
}
路径二{
过渡：0.5s；
转化：translateX（-30%）；
}
.cta:悬停路径。三{
动画：彩色动画1s无限0.2s；
}
.cta:悬停路径.1{
转化：translateX（0%）；
动画：彩色动画1s无限0.6s；
}
.cta:悬停路径。2{
转化：translateX（0%）；
动画：彩色动画1s无限0.4s；
}
/*SVG动画*/
@关键帧颜色动画{
0% {
填充物：白色；
}
50% {
填充：#FBC638；
}
100% {
填充物：白色；
}
}

---

当您希望在传单地图上显示弹出窗口或其他内容时，您发布的代码应包含传单代码。此外，当您创建实时演示（例如在JSFIDLE上）时，它也非常有用

但现在来回答您的问题：

您可以通过默认方式

addEventListener

或使用传单库向元素添加事件。我在传单库中使用它：

但是首先在按钮中添加一个id

当您想在特定位置呼叫中打开弹出窗口时：

L.DomEvent.on(button,'click',function(){
    var latlng = map.getCenter(); // or [47.478058, 9.720154]
    L.popup().setContent('Test').setLatLng(latlng).openOn(map)
});

我想你的下一个问题是“我怎样才能缩放到一个标记”：

这有点困难，因为我们需要知道要缩放到哪个标记。这意味着您必须将标记保存到全局变量，以便在按钮单击事件中使用它

var latlng = map.getCenter(); // or [47.478058, 9.720154]
var marker = L.marker(latlng).addTo(map);
L.DomEvent.on(button,'click',function(){
    var zoomlvl = 16;
    map.flyTo(marker.getLatLng(),zoomlvl)
});

---

使用以下命令：

document.querySelector（'.cta'）.addEventListener（'click'，function（）{…}）；

并将您的代码放入函数中。Hello Chris谢谢您的回答，所以如果我理解得很好，我会创建一个.js文件，我会添加您给我的行，我只会在（）之间添加我的html，我可以在之后从html中删除代码吗？：）我试着从你的代码中找出一个答案，但它没有显示任何东西。你也不必告诉我们你的整个故事。如果你希望你能填写你的个人资料嗨，保罗，不，对不起，这太离题了，我建议你先做一些基础教程。非常感谢，先生，一切都很完美。我真的很感谢你为我抽出时间！我希望你有一个真正好的一天，和我一样的回答！！！保罗

var latlng = map.getCenter(); // or [47.478058, 9.720154]
var marker = L.marker(latlng).addTo(map);
L.DomEvent.on(button,'click',function(){
    var zoomlvl = 16;
    map.flyTo(marker.getLatLng(),zoomlvl)
});