Leaflet 如何在地图上显示传单简易按钮(插件)按钮?

Leaflet 如何在地图上显示传单简易按钮(插件)按钮?,leaflet,Leaflet,我不熟悉传单和JavaScript。我正在尝试创建一个web地图,该地图将有3-4个按钮,单击该按钮将用户缩放到给定位置。例如:迪士尼乐园(28.385384005128767,-81.56313371302178)、黑池游乐海滩(53.937909193096296,-3.0415772052368952)。 到目前为止,我一直在尝试教程中的代码,但无法在地图上显示按钮。我做错了什么 .full{ 填充:0; 保证金:0; } .完整html,正文,#映射{ 身高:100%; 宽度:100v

我不熟悉传单和JavaScript。我正在尝试创建一个web地图,该地图将有3-4个按钮,单击该按钮将用户缩放到给定位置。例如:迪士尼乐园(28.385384005128767,-81.56313371302178)、黑池游乐海滩(53.937909193096296,-3.0415772052368952)。 到目前为止,我一直在尝试教程中的代码,但无法在地图上显示按钮。我做错了什么

.full{
填充:0;
保证金:0;
}
.完整html,正文,#映射{
身高:100%;
宽度:100vw;
}
.中心{
文本对齐:居中;
} 
html,body,#map{
身高:100%;
宽度:100vw;
}
#地图{宽度:100%;高度:100%;}
iframe{
对齐内容:居中对齐;
宽度:98%;高度:97%;
}
.单张栏按钮,
.传单栏按钮:悬停{
背景色:#fff;
边界:无;
边框底部:1px实心#ccc;
宽度:26px;
高度:26px;
线高:26px;
显示:块;
文本对齐:居中;
文字装饰:无;
颜色:黑色;
}
.单张栏按钮{
背景位置:50%50%;
背景重复:无重复;
溢出:隐藏;
显示:块;
}
.传单栏按钮:悬停{
背景色:#F4;
}
.单张栏按钮:第一种类型{
边框左上半径:4px;
边框右上角半径:4px;
}
.传单栏按钮:最后一种类型{
边框左下半径:4px;
边框右下半径:4px;
边框底部:无;
}
.单张酒吧,
.单张栏按钮。已禁用{
游标:默认值;
指针事件:无;
不透明度:.4;
}
.简易按钮.按钮状态{
显示:块;
宽度:100%;
身高:100%;
位置:相对位置;
}
.传单触摸。传单栏按钮{
宽度:30px;
高度:30px;
线高:30px;
}

地图
var map=L.map('map',{center:[42.353770,-71.10360608],缩放:16,键盘:true});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{attribute:'©OpenStreetMap'})。添加到(地图);
var Esri_WorldImages=L.Tillelayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z} /{y}/{x},{属性:'Tiles©;Esri—来源:Esri、i-cubed、美国农业部、美国地质勘探局、AEX、GeoEye、Getmapping、Aerogrid、IGN、IGP、UPR-EGP和GIS用户社区'
}).addTo(地图);
var OSM=L.tileLayer('http://{s}.tile.OSM.org/{z}/{x}/{y}.png',{attribute:'©OpenStreetMap'})。addTo(map);
变量映射选项={
“卫星”:Esri_WorldImages,
“OSM”:OSM
}
L.control.layers(mapChoices).addTo(map);
var map=L.map('map',{scrollWheelZoom:false}).setView([37.8,-96],4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(zoomTo);
L.easyButton('fa gbp',function(){
map.setView([55,-2],4);
}).addTo(地图);
L.easyButton('fa-jpy',function(){
地图.setView([38139],4);
}).addTo(地图);
L.easyButton('fa usd',函数(){
地图.setView([37.8,-96],3);
}).addTo(地图);

只需不重新实例化map,也不重新分配
map
变量即可

您可以将2个
标记合并在一起,这样您就可以更清楚地了解问题所在

您的第二个地图实例化应该在浏览器Devtools控制台中抛出一个错误(如果您没有使用它,请确保了解如何打开它)


之后,脚本的其余部分将被忽略。

只需不重新实例化map,也不重新分配
map
变量即可

您可以将2个
标记合并在一起,这样您就可以更清楚地了解问题所在

您的第二个地图实例化应该在浏览器Devtools控制台中抛出一个错误(如果您没有使用它,请确保了解如何打开它)

之后,脚本的其余部分将被忽略