Geometry 传单:更容易选择圆形标记

Geometry 传单:更容易选择圆形标记,geometry,leaflet,click,Geometry,Leaflet,Click,我使用一个传单地图,当页面加载时,它会显示多个圆圈标记。但是用户发现在手机和iPad上点击/触摸圆圈标记有点困难。有没有办法增加这些圆标记的选择“区域”?这段可运行代码演示了如何使用SVG使标记的图标成为您的解决方案: var clatlng=[15100]; var zoom=8; var mymap=L.map(“mapid”).setView(clatlng,zoom); //这张地图很简单,没有麻烦。 L.tileLayer(“http://{s}.tile.openstreetmap

我使用一个传单地图,当页面加载时,它会显示多个圆圈标记。但是用户发现在手机和iPad上点击/触摸圆圈标记有点困难。有没有办法增加这些圆标记的选择“区域”?

这段可运行代码演示了如何使用SVG使标记的图标成为您的解决方案:

var clatlng=[15100];
var zoom=8;
var mymap=L.map(“mapid”).setView(clatlng,zoom);
//这张地图很简单,没有麻烦。
L.tileLayer(“http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”{
属性:“地图数据©;OpenStreetMap贡献者”
}).addTo(mymap);
常数=
'';
const svgpin_O=encodeURI(“数据:image/svg+xml;utf-8,”+svg_O);
常量图标_O=L.图标({
Iconur:svgpin_O,
iconSize:[100100],
iconAnchor:[50,50]
});
var marker1=L.标记(clatlng{
icon:icon_O,
真的,
自动扫描:对
}).addTo(mymap);
const svg炣pin=
'';
const svgpin_Url=encodeURI(“数据:image/svg+xml;utf-8,”+svg_-pin);
常量svgpin_图标=L.Icon({
iconUrl:svgpin_Url,
iconSize:[24,24],
iconAnchor:[12,24],
popupAnchor:[0,-22]
});
var marker2=L.标记(clatlng{
图标:svgpin_图标,
真的,
自动扫描:对
}).addTo(mymap)
#mapid{
高度:200px;
}