Leaflet 传单：如何改变地图中心和缩放水平点击圆圈标记？

我正在和几个巡游者一起绘制地图。当用户点击这个圆圈标记器时，我想把地图放在这个圆圈标记器的中心并放大。当我在多边形层上尝试时，它是有效的，但在圆形标记器上没有成功。有人能帮我吗

以下是我的circleMarkers的代码：

    <script>


    var map = L.map('map', { 
        center: [41.8, 12.5],
        zoom: 5,
        zoomControl:true, maxZoom:15, minZoom:4,
        });
var feature_group = new L.featureGroup([]);
var raster_group = new L.LayerGroup([]);

var basemap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri',
});
basemap.addTo(map);


    function style1(feature) {
        return {
            weight: 2,
            radius: 10,
            opacity: 1,
            color: 'black',
            weight: 1,
            fillOpacity: 1,
            fillColor: 'red'
        };
    }                               

    L.geoJson(villes, {
        style: style1,
        pointToLayer: function (feature, latlng)
            {
                return L.circleMarker(latlng).bindLabel( feature.properties.Name, {className: "ville", noHide: true });

            }           
            }
    )

                            .addTo(map)
                            .showLabel; 


</script>.

var map=L.map（'map'，{
中间：[41.8,12.5]，
缩放：5，
zoomControl:true、maxZoom:15、minZoom:4、，
});
var feature_group=新的L.featureGroup（[]）；
var raster_group=新的L.LayerGroup（[]）；
var basemap=L.tileLayer（'http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z} /{y}/{x}'{
属性：“Tiles©；Esri&mdash；来源：Esri”，
});
basemap.addTo（map）；
函数样式1（特性）{
返回{
体重：2，
半径：10，
不透明度：1，
颜色：'黑色'，
体重：1，
不透明度：1，
填充颜色：“红色”
};
}                               
L.geoJson（维尔斯{
风格：风格1，
pointToLayer：功能（特性、latlng）
{
返回L.circleMarker（latlng）.bindLabel（feature.properties.Name，{className:“ville”，noHide:true}）；
}           
}
)
.addTo（地图）
.展示标签；
.

是指向完整地图的链接

---

谢谢。

这非常简单。 假设

marker

指向您的传单标记，

map

指向您的传单地图

快捷方式（推荐）

在这里，我甚至不计算所需的缩放级别，因为我假设传单无论如何都必须缩放到其最大级别

我还可以将我的标记添加到

L.LayerGroup

，即使

LayerGroup

的要点是将多个标记分组

无论如何，更精确的方法

marker.on("click", function(event) {
    map.setView(marker.getLatLng(), map.getBoundsZoom(layerGroup.getBounds());
}, marker);

请注意，快速方法也可以很好地完成。第二种解决方案可能看起来更精确，但速度也较慢，并且意味着使用

LayerGroup

，这不是它设计的工作方式（为每个标记创建一个新的LayerGroup）

别忘了花时间阅读，它设计精良，很容易理解。

我找到了解决方案：

    function onClick(e) {map.setView(this.getLatLng(),15);}

    L.geoJson(villes, {
        style: style1,
        pointToLayer: function (feature, latlng)
            {
                return L.circleMarker(latlng).bindLabel( feature.properties.Name, {className: "ville", noHide: true }).on('click', onClick);

            }           
            }
    )
                            .addTo(zoom1)
                            .showLabel;

---

谢谢你的帮助。

欢迎来到SO！你说你可以在其他向量层上做。如果你能提供你在这种情况下使用的代码，这将有助于获得个性化的答案。更好的是，如果你能在网上重现你的问题（例如使用），你会帮助其他人更快地理解你的问题并为你提供支持。谢谢你。星期一我会尽快尝试你的解决方案（我不在工作）。我很肯定它会起作用的。我试了好几种方法，但我从没想过要写“marker.on”！对不起，我没有成功。我不知道我必须在哪里写你的代码。我尝试了我能想象到的每一个解决方案，把你的代码放在所有地方。我不是java和传单方面的专家。我读过文件，但我不是java和传单方面的专家。如果我没有看到完整的示例，我不知道如何关联所有这些代码。你能告诉我我必须把你的代码写在哪里吗。非常感谢。

    function onClick(e) {map.setView(this.getLatLng(),15);}

    L.geoJson(villes, {
        style: style1,
        pointToLayer: function (feature, latlng)
            {
                return L.circleMarker(latlng).bindLabel( feature.properties.Name, {className: "ville", noHide: true }).on('click', onClick);

            }           
            }
    )
                            .addTo(zoom1)
                            .showLabel;