blocks|key|4882870|text|使用Leaflet.MovingMarker：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4882871|++++//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+);|code-block|syntax|javascript|4882872|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use Leaflet.MovingMarker:</p>

<pre><code>    //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 );
</code></pre>


blocks|key|2769810|text|接口中有L.PosAnimation可以做这样的事情：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2769811|http://leafletjs.com/reference.html#posanimation|2769812|对于更复杂的方法，你可以看看这个插件：|2769813|https://github.com/openplans/Leaflet.AnimatedMarker|2769814|entityMap|0|LINK|mutability|MUTABLE|url|1^0|4|E|0|0|1C|0|0|0|0|1F|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|L|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|G]]|S|$5|O|P|Q|E|$R|K]]]]

<p>There is <strong>L.PosAnimation</strong> in the API to do things like this:</p>

<p><a href="http://leafletjs.com/reference.html#posanimation" rel="nofollow">http://leafletjs.com/reference.html#posanimation</a></p>

<p>For a more sophisticated approach you could take a look at this plugin:</p>

<p><a href="https://github.com/openplans/Leaflet.AnimatedMarker" rel="nofollow">https://github.com/openplans/Leaflet.AnimatedMarker</a></p>


blocks|key|2769829|text|https://github.com/ewoken/Leaflet.MovingMarker|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2769830|添加脚本，然后使用：|2769831|var+myMovingMarker+=+L.Marker.movingMarker([[48.8567,+2.3508],[50.45,+30.523333]],+[20000]).addTo(map);

myMovingMarker.start();|code-block|syntax|javascript|2769832|entityMap|0|LINK|mutability|MUTABLE|url^0|0|1A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|4]]]]

<p><a href="https://github.com/ewoken/Leaflet.MovingMarker" rel="nofollow">https://github.com/ewoken/Leaflet.MovingMarker</a></p>

<p>Add the script then use:</p>

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

myMovingMarker.start();
</code></pre>


blocks|key|4882901|text|你有这个插件到leaflet，当你有了新的位置，而不是做一个.setlatlng()并且标记跳到那个位置，你做一个.slideTo()，标记将平滑地滑动到那个新的位置，并且你不需要一组位置作为Leaflet.MovingMarker，你只需要给新的一个，它为你做了所有的事情。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4882902|点击地图，标记将滑到他的新位置|4882903|​|4882904|<!DOCTYPE+html>
<html>
<head>
<style>
#map+{
++++height:+500px;
++++width:+80%25;
}
</style>
<script>
++++
++++
++++
++++++++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>|code-block|syntax|javascript|4882905|4882906|leaflet-drift-marker|offset|length|4882907|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/hugobarragon/leaflet-drift-marker^0|0|0|0|0|0|0|K|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|A|$I|J]]|$1|K|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<p>You have this plugin to leaflet, when you have the new position, instead of doing a .setlatlng() and the marker jumps to that position, you do a .slideTo() and the marker will slide smothly to that new position, and you dont need a set of positions as Leaflet.MovingMarker, you just git the new one and it does everything for you example:</p>

<h2>click on the map and marker will slide to his new position</h2>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
#map {
    height: 500px;
    width: 80%;
}
&lt;/style&gt;
&lt;script&gt;&lt;!-- will be fixed on next release --&gt;
    &lt;!-- Include this script if exports does not exists on window or --&gt;
    &lt;!-- the following error "ReferenceError: exports is not defined" --&gt;
    &lt;!-- before the cdn import --&gt;
        var exports = {};
&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css"&gt;
&lt;script src="https://unpkg.com/leaflet-drift-marker@1.0.3/lib/DriftMarker/Drift_Marker.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="map"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;script&gt;
	 	// 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 = '&amp;copy; &lt;a href="http://openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; 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
    });
&lt;/script&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://github.com/hugobarragon/leaflet-drift-marker" rel="nofollow noreferrer">leaflet-drift-marker</a></p>


<p>Guys i am complete newbie in using openstreetmaps. I have put some markers on it with custom icons, embedded with popups, etc. Now, I really need to know how to move a marker on Openstreet map. I am implementing it using Leaflet API. There is nothing on marker animation b/w two points on documentation of letlet offical website. Please help me out here because i am clueless. Give me some links or blogs or some kind of helping material on it.</p>

<p>Thanks.</p>


Move marker on Openstreet map - Leaflet API

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

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

问在Openstreet地图上移动标记- Leaflet API
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Openstreet地图上移动标记- Leaflet APIEN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Openstreet地图上移动标记- Leaflet API
EN