Question

我使用插件leaflet.motion。我在示例documentation上添加了标记：

L.motion.polyline([[50,0], [60,10]], {
    color: "transparent"
}, {
    auto: true,
    duration: 3000,
    easing: L.Motion.Ease.easeInOutQuart
}, {
    removeOnEnd: true,
    icon: L.divIcon({html: "<i class='fa fa-car fa-2x' aria-hidden='true'></i>", iconSize: L.point(27.5, 24)})
}).addTo(map);

动画可以播放，但是现在我想添加一个事件。但是通常的方法是

marker.on('click', onClick);

function onClick(e) {
    alert(this.getLatLng());
}

不能使用，因为标记本身将由插件创建。

谢谢您的建议。

Answer 1

L.motion.polyline返回带有标记为__marker的对象。

let marker = L.motion.polyline( ... ).__marker;

注意：没有记录的方法来创建标记(Issue Raised)

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) {
  alert(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>

更新

getMarker()方法现已可用

let marker = L.motion.polyline( ... ).getMarker();

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.getMarker();

marker.on('click', onClick);

function onClick(e) {
  alert(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>

如何通过使用leaflet.motion将事件添加到标记？

1 个答案: