Question

伙计们，我是使用openstreetmaps的新手。我在其上放了一些标记，带有自定义图标，嵌入弹出窗口等等。现在，我真的需要知道如何在Openstreet地图上移动标记。我正在使用Leaflet API实现它。关于letlet官方网站文档上的标记动画b / w上没有任何内容。请帮帮我，因为我一无所知。给我一些链接或博客或某种帮助材料。

感谢。

Answer 1

使用Leaflet.MovingMarker：

    //MovingMarker Options
                        var animationMarker = L.Marker.movingMarker(
                            [[48.8567, 2.3508],[50.45, 30.523333]],
                            20000, {autostart: true});
    // Custom Icon Object
                        var greenIcon = L.icon({
                            iconUrl: 'icon.png',
                        });
   // Set icon to movingMarker
                        animationMarker.options.icon = greenIcon;
   // Add marker to Map
                        map.addLayer(animationMarker );

Answer 2

API中有 L.PosAnimation 来执行以下操作：

http://leafletjs.com/reference.html#posanimation

对于更复杂的方法，您可以查看此插件：

https://github.com/openplans/Leaflet.AnimatedMarker

Answer 3

https://github.com/ewoken/Leaflet.MovingMarker

添加脚本然后使用：

var myMovingMarker = L.Marker.movingMarker([[48.8567, 2.3508],[50.45, 30.523333]], [20000]).addTo(map);

myMovingMarker.start();

Answer 4

您需要将此插件添加到传单中，当您拥有新位置时，而不是执行.setlatlng（）并且标记跳到该位置，而是执行.slideTo（），标记将平滑地滑动到该新位置，而您不需要像Leaflet.MovingMarker那样的一组位置，只需将新的位置混合在一起，它就会为您完成所有操作，例如：

点击地图，标记将滑动到他的新位置

<!DOCTYPE html>
<html>
<head>
<style>
#map {
    height: 500px;
    width: 80%;
}
</style>
<script><!-- will be fixed on next release -->
    <!-- Include this script if exports does not exists on window or -->
    <!-- the following error "ReferenceError: exports is not defined" -->
    <!-- before the cdn import -->
        var exports = {};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<script src="https://unpkg.com/leaflet-drift-marker@1.0.3/lib/DriftMarker/Drift_Marker.js"></script>
</head>
<body>
<div id="map"></div>
</body>
<script>
	 	// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
	 	// Creating a tile layer usually involves setting the URL template for the tile images
	 	var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
	 	    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	 	    osm = L.tileLayer(osmUrl, {
	 	        maxZoom: 18,
	 	        attribution: osmAttrib
	 	    });
			
	 	// initialize the map on the "map" div with a given center and zoom
	 	var map = L.map('map').setView([19.04469, 72.9258], 1).addLayer(osm);
		
		var marker = new Drift_Marker([19.04469, 72.9258], {
	 	        draggable: true,
	 	        title: "Resource location",
	 	        alt: "Resource Location",
	 	        riseOnHover: true
	 	    }).addTo(map)
	 	        .bindPopup("test").openPopup();
		
	 	// Script for adding marker on map click
	 	function onMapClick(e) {
         marker.slideTo(	e.latlng, {
                duration: 2000
              });
	 	}
	 	map.on('click', onMapClick);
    marker.slideTo(	[20, 20], {
      duration: 2000
    });
</script>
</html>

leaflet-drift-marker

在Openstreetmap - Leaflet API上移动标记

4 个答案:

点击地图，标记将滑动到他的新位置