javascript - 单击时缩放到标记位置 - 传单
问题描述
我正在地图上显示来自 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);
解决方案
要获得平滑的动画平移/缩放效果而不是跳跃,请使用flyTo
cityMarker.on('click', function(e) {
map.flyTo(e.latlng, 16);
});
推荐阅读
- java - Java Firebase 服务器应用程序.. 当我在 IntelliJ 中运行它时工作正常,但 .class 文件没有运行
- python-3.x - 如何激活任务栏上的收藏夹图标?
- rest - 无法使用 keycloak api 创建用户
- java - 我们如何将属于同一算法的两个相关逻辑重构为两个独立的方法?
- c++ - 从 Cstring 中删除 \x
- ios - 使用未声明类型“SideMenuNavigationControllerDelegate”错误
- mysql - 执行此查询时出现以下错误
- java - Maven 安装任务似乎在编译之前对旧代码运行测试
- python - 暂停调用的函数几秒钟
- c++ - 为什么 CodeChef 在线 ide 在其他在线 ide 上完美运行时,也会为以下插入排序提供 SIGSEGV 错误?