在 Openstreet 地图上移动标记 - Leaflet API
Posted
技术标签:
【中文标题】在 Openstreet 地图上移动标记 - Leaflet API【英文标题】:Move marker on Openstreet map - Leaflet API 【发布时间】:2013-06-28 12:28:59 【问题描述】:伙计们,我是使用 openstreetmaps 的新手。我用自定义图标在上面放置了一些标记,嵌入了弹出窗口等。现在,我真的需要知道如何在 Openstreet 地图上移动标记。我正在使用 Leaflet API 实现它。 letlet 官方网站的文档中没有关于标记动画黑白两点的内容。请在这里帮助我,因为我一无所知。给我一些链接或博客或一些关于它的帮助材料。
谢谢。
【问题讨论】:
您可以通过marker.setLatLng()
设置标记的位置。您可能会自己实现动画...
我自己实现动画可能会很头疼。这个 API 是否不支持任何方法来实现这一点?像MoveMarker(start point, end point, speed)
这样的任何方法!!!
【参考方案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 );
【讨论】:
【参考方案2】:API 中有 L.PosAnimation 可以执行以下操作:
http://leafletjs.com/reference.html#posanimation
对于更复杂的方法,您可以查看此插件:
https://github.com/openplans/Leaflet.AnimatedMarker
【讨论】:
【参考方案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();
【讨论】:
你知道如何自定义移动图标吗?【参考方案4】:你有这个插件传单,当你有新的位置时,而不是做一个 .setlatlng() 并且标记跳到那个位置,你做一个 .slideTo() 并且标记会平滑地滑动到那个新位置,并且您不需要作为 Leaflet.MovingMarker 的一组位置,您只需 git 新的位置,它会为您完成所有工作:
点击地图,标记会滑到他的新位置
<!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 = '© <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
【讨论】:
以上是关于在 Openstreet 地图上移动标记 - Leaflet API的主要内容,如果未能解决你的问题,请参考以下文章
在谷歌地图javascript api中 - 如何移动地图而不是标记
随着用户的移动,定期将地图上的所有标记移动到其更新/新的当前位置