logo标签列表

在OpenStreet地图上移动标记 - Leaflet API

javascriptopenstreetmapleaflet
5

大家好，我是一个OpenStreetMaps的新手。我已经在地图上放置了一些带有自定义图标和弹出框的标记。现在，我真的需要知道如何在Openstreet地图上移动一个标记。我正在使用Leaflet API实现它。在letlet官方网站的文档中没有关于标记在两点之间动画的内容。请帮帮我，因为我很无助。给我一些链接、博客或其他帮助材料。

谢谢。

您可以通过 marker.setLatLng() 方法设置标记的位置。您可能需要自己实现动画效果... - tyr
1
自己实现动画可能会很头疼。这个API难道不支持任何方法来实现吗？？有没有像MoveMarker（起始点，结束点，速度）这样的方法！！ - Azeem
6个回答
3

使用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
你可以使用 Leaflets 的 marker.setLatLng(<LatLng> latlng) 方法。这些标记具有 HTML 元素作为图标。你可以使用 transition 方法和 CSS 样式进行样式设置。
一个例子如下：
<style>
    .<icon-class> {
      transition: all 1s;
    }
</style>

这使得标记器在一秒内直线移动到新位置。
这实际上是对所提出问题的唯一正确答案。没有插件，没有动画，只需更新标记的位置。 - Mike 'Pomax' Kamermans
1
你知道如何自定义移动图标吗？ - Nizar B.
1
0
你有一个适用于 leaflet 的插件，当你有新的位置时，不需要使用 .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

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接