Question

我使用leaflet.motion在传单中有一个活动标记。多亏了User863，我知道如何使用插件add an event to the marker。就我而言，我想将地图中心对准标记：

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: '&copy; <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);
}

它仅适用于用户单击标记的对象。如何跟踪标记，从而使地图居中于标记？

谢谢您的建议。

Answer 1

使用Leaflet标记的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: '&copy; <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>

单击标记后，如何将地图对准移动的标记？

1 个答案: