javascript 在 Openstreet 地图上移动标记 - Leaflet API
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17364769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move marker on Openstreet map - Leaflet API
提问by Azeem
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.
伙计们，我是使用 openstreetmaps 的新手。我在上面放了一些带有自定义图标、嵌入弹出窗口等的标记。现在，我真的需要知道如何在 Openstreet 地图上移动标记。我正在使用 Leaflet API 实现它。letlet 官方网站的文档中没有关于标记动画黑白两点的任何内容。请在这里帮助我，因为我一无所知。给我一些链接或博客或某种帮助材料。
Thanks.
谢谢。
回答by Jaime L
Use Leaflet.MovingMarker:
使用 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 );
回答by Marcel Pfeiffer
There is L.PosAnimationin the API to do things like this:
API 中有L.PosAnimation可以做这样的事情：
http://leafletjs.com/reference.html#posanimation
http://leafletjs.com/reference.html#posanimation
For a more sophisticated approach you could take a look at this plugin:
对于更复杂的方法，您可以查看此插件：
回答by LSkuse
https://github.com/ewoken/Leaflet.MovingMarker
https://github.com/ewoken/Leaflet.MovingMarker
Add the script then use:
添加脚本然后使用：
var myMovingMarker = L.Marker.movingMarker([[48.8567, 2.3508],[50.45, 30.523333]], [20000]).addTo(map);
myMovingMarker.start();
回答by Hugo Barragon
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:
你有这个插件传单，当你有新的位置，而不是做一个 .setlatlng() 并且标记跳转到那个位置，你做一个 .slideTo() 并且标记会平滑地滑动到那个新位置，然后你不需要像 Leaflet.MovingMarker 那样的一组位置，您只需 git 新的位置，它就会为您完成所有工作，例如：
click on the map and marker will slide to his new position
单击地图，标记将滑动到他的新位置
<!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/[email protected]/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 = '© <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>