leaflet - 单击标记后,地图如何以移动标记为中心?
问题描述
我使用leaflet.motion在传单中有一个移动标记。感谢 User863,我知道如何使用插件向标记添加事件。就我而言,我想将地图置于标记的中心:
var map = L.map('Lmap').setView([60, 10], 10);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
fadeAnimation: false,
zoomAnimation: false,
markerZoomAnimation: false,
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
let motionLine = L.motion.polyline([[50, 0], [60, 10]], {
color: "transparent"
}, {
auto: true,
duration: 3000,
easing: L.Motion.Ease.easeInOutQuart
}, {
removeOnEnd: false,
icon: L.divIcon({
html: "<i class='fa fa-car fa-2x' aria-hidden='true'></i>",
iconSize: L.point(27.5, 24)
})
}).addTo(map);
let marker = motionLine.__marker;
marker.on('click', onClick);
function onClick(e) {
map.setView(e.target.getLatLng(),10);
}
它仅适用于用户单击标记的那些。如何跟踪标记并保持地图以标记为中心?
感谢您的任何建议。
解决方案
使用传单标记的move
事件
var map = L.map('Lmap').setView([60, 10], 10);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
fadeAnimation: false,
zoomAnimation: false,
markerZoomAnimation: false,
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
var motionLine = L.motion.polyline([
[59, 9],
[60, 10]
], {
color: "transparent"
}, {
auto: true,
duration: 10000,
easing: L.Motion.Ease.linear
}, {
removeOnEnd: false,
icon: L.divIcon({
html: "<i class='fa fa-car fa-2x' aria-hidden='true'></i>",
iconSize: L.point(27.5, 24)
})
}).addTo(map);
var marker = motionLine.getMarker();
marker.on('click', onClick);
function onClick(e) {
alert(this.getLatLng());
}
marker.on('move', function() {
map.setView(this.getLatLng())
});
#Lmap {
position: absolute;
top: 35px;
left: 0;
width: 100%;
height: 80%
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Igor-Vladyka/leaflet.motion/dist/leaflet.motion.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div id="Lmap"></div>
推荐阅读
- sql - 仅在某些组列表中为用户选择 SQL
- c - 为什么我必须将 %u 与 unsigned int 一起使用,而我可以将 %i 与 unsigned char 一起使用?
- angularjs - 需要使用 HTTP 服务的动态 AngularJs Bootstrap 数据表自定义分页
- android - 从过滤器 rxjava 返回容器对象
- javascript - 从另一个插座打开一个插座时出现角度滚动问题
- shell - 在 Linux Shell 脚本中将小数与整数进行比较
- spring - 如何使用 JDBC 配置通过 AD 密码连接到 Azure SQL DB?
- php - Rest api php上传图片在邮递员中不起作用,方法“POST”
- performance - Http Post - 状态 ExecuteRequestHandler 的长时间延迟
- xml - xPath following-sibling::nameOfTheNode 不产生任何结果