Saya memiliki penanda bergerak di selebaran dengan menggunakan leaflet.motion. Terima kasih kepada User863, saya tahu cara menambahkan acara ke penanda dengan menggunakan plugin. Dalam kasus saya, saya ingin memusatkan peta pada penanda:

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

Ini hanya berfungsi jika pengguna telah mengklik penanda. Bagaimana cara melacak penanda dan menjaga peta tetap di tengah penanda?

Terima kasih atas saran apa pun.

0
Lustig 14 Agustus 2019, 09:48

1 menjawab

Jawaban Terbaik

Menggunakan acara move penanda Leaflet

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
User863 19 Agustus 2019, 06:36