当您单击列表中的某个国家/地区名称时，缩放到地图上的某个国家/地区

Question

我有一个应用程序，它在地图上突出显示国家列表，并在侧边面板中显示它们的名称

我想让以下事情发生:当你点击侧面面板中的国家名称时。你放大到地图上的国家。

我不知道如何做到这一点，如果有人给我一个例子或建议最好的方法来做到这一点，我将不胜感激

Answer 1

实际上取决于您的设置，我假设您正在使用geoJSON。在我从事的一个项目中，我创建了一个函数，一旦您从缩放到相应geoJSON的列表中单击，该函数就会运行…或者，如果列表是由geoJSON填充的，则可以将每个geoJSON层的传单ID附加到列表的相应元素。

标记-收集geoJSON
layer.特性.properties.pin -与geoJSON匹配的所列记录的对应键(这需要与您的数据匹配)
Pin -列表中相应的元素(这需要匹配您的数据)
第一个setStyle -高亮显示geoJSON
地图。Fitbounds -放大到高亮显示的信息
第二个setStyle -将所有其他geoJSON层更改为原始样式。

function selectedparcel(pin){
   markers.eachLayer(function (layer){
    if (layer.feature.properties.pin === pin){
        layer.setStyle({
            fillColor: '#2262CC',
            fillOpacity: 1,
            weight: 3
        });
//this is where the zoom happens
        map.fitBounds(layer.getBounds());
    } else {
        layer.setStyle({
            color: '#ff7800',
            weight: 1,
            opacity: 1,
            fillOpacity: 0  
        });
    } 
});

我希望这就是你要找的。如果你想使用传单id方法Bryan McBride在他的js代码中有一个例子:

https://github.com/bmcbride/building-damage-reporter