Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/79.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 单击时缩放到标记位置-传单_Javascript_Html_Leaflet_Zooming_Marker - Fatal编程技术网

Javascript 单击时缩放到标记位置-传单

Javascript 单击时缩放到标记位置-传单,javascript,html,leaflet,zooming,marker,Javascript,Html,Leaflet,Zooming,Marker,我正在地图上显示geojson文件中的标记。在当前代码中,当我将鼠标悬停在标记上时,我可以在弹出窗口中看到属性。我想在单击标记时添加“飞到”或“放大”标记的确切位置。我如何才能实现这一点 cityMarker = new L.geoJson(city, { onEachFeature: function(feature, layer) { //if (feature.properties && feature.properties.nam

我正在地图上显示geojson文件中的标记。在当前代码中,当我将鼠标悬停在标记上时,我可以在弹出窗口中看到属性。我想在单击标记时添加“飞到”或“放大”标记的确切位置。我如何才能实现这一点

 cityMarker = new L.geoJson(city, {
        onEachFeature: function(feature, layer) {
            //if (feature.properties && feature.properties.name) {
            if ( feature.properties.name) {   
                layer.bindPopup(feature.properties.name, {closeButton: false, offset: L.point(0, -2)});
                layer.on('mouseover', function() { layer.openPopup(); });
                layer.on('mouseout', function() { layer.closePopup(); });
            }
        },
        pointToLayer: function (feature, latlng) {
            var cityIcon = new L.Icon({
            iconSize: [20, 20],
            iconAnchor: [13, 27],
            popupAnchor: [1, -20],
            iconUrl: './css/img/marker-icon-red.png'
        });
            //return L.circleMarker(latlng);
            return L.marker(latlng,{icon: cityIcon});
        }
    });
  
    map.addLayer(cityMarker);

我已经找到了解决方案,所以,我在这里添加它

 cityMarker.on('click', function(e) {
      map.setView(e.latlng, 16);      
});         

要获得平滑的动画平移/缩放效果,而不是跳跃,请使用
flyTo

cityMarker.on('click', function(e) {
      map.flyTo(e.latlng, 16);      
});