如何通过使用leaflet.motion将事件添加到标记? [英] How to add events to marker by using leaflet.motion?

问题描述

我使用插件leaflet.motion.我在网站上添加了标记:

I use the plugin leaflet.motion. I add the marker like the example on the website:

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);

动画有效，但现在我想添加一个事件.但是用

The animation works but now I'd like to add an event. But the usual way with

marker.on('click', onClick);

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

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

can not be used because the marker itself will be created by the plugin.

谢谢您的建议.

推荐答案

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

L.motion.polyline returns an object with marker named __marker.

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

注意:没有记录的方法来创建标记

Note: There is no documented way to get a marker created (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将事件添加到标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！