場景

Vue+Leaflet實現加載OSM顯示地圖：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394

在上面的基礎上，怎樣使用插件MovingMarker實現標記移動效果。

效果

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、插件地址

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

2、下載倉庫代碼，復制其MovingMarker.js核心文件

3、引入leaflet所需的文件以及該js文件

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript" src="./js/MovingMarker.js"></script>

4、完整示例代碼

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>leaflet移動點位(軌跡回放效果)</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript" src="./js/MovingMarker.js"></script>
    <script type="text/javascript">
   
        var map = L.map('map').setView([36.09, 120.35], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: ''
        }).addTo(map);

        var parisKievLL = [
            [48.8567, 2.3508],
            [50.45, 30.523333]
        ];
        var londonParisRomeBerlinBucarest = [
            [51.507222, -0.1275],
            [48.8567, 2.3508],
            [41.9, 12.5],
            [52.516667, 13.383333],
            [44.4166, 26.1]
        ];
        var londonBrusselFrankfurtAmsterdamLondon = [
            [51.507222, -0.1275],
            [50.85, 4.35],
            [50.116667, 8.683333],
            [52.366667, 4.9],
            [51.507222, -0.1275]
        ];
        var barcelonePerpignanPauBordeauxMarseilleMonaco = [
            [41.385064, 2.173403],
            [42.698611, 2.895556],
            [43.3017, -0.3686],
            [44.837912, -0.579541],
            [43.296346, 5.369889],
            [43.738418, 7.424616]
        ];


        map.fitBounds(londonParisRomeBerlinBucarest);

        //點擊標記開始/暫停
        //========================================================================
        var marker1 = L.Marker.movingMarker(parisKievLL, [10000]).addTo(map);
        L.polyline(parisKievLL).addTo(map);
        marker1.once('click', function () {
            marker1.start();
            marker1.closePopup();
            marker1.unbindPopup();
            marker1.on('click', function () {
                if (marker1.isRunning()) {
                    marker1.pause();
                } else {
                    marker1.start();
                }
            });
            setTimeout(function () {
                marker1.bindPopup('<b>點我暫停 !</b>').openPopup();
            }, 2000);
        });

        marker1.bindPopup('<b>點我開始</b> !</b>', {
            closeOnClick: false
        });
        marker1.openPopup();

        //=========================================================================
        //添加一個循環走的標記
        var marker3 = L.Marker.movingMarker(londonBrusselFrankfurtAmsterdamLondon,
            [2000, 2000, 2000, 2000], {
                autostart: true,
                loop: true
            }).addTo(map);

        marker3.loops = 0;
        marker3.bindPopup('', {
            closeOnClick: false
        });

        //=========================================================================
        //設置循環loop事件，進行循環次數計數
        marker3.on('loop', function (e) {
            marker3.loops++;
            if (e.elapsedTime < 50) {
                marker3.getPopup().setContent("<b>Loop: " + marker3.loops + "</b>")
                marker3.openPopup();
                setTimeout(function () {
                    marker3.closePopup();

                    if (!marker1.isEnded()) {
                        marker1.openPopup();
                    } else {
                        if (marker4.getLatLng().equals([45.816667, 15.983333])) {
                            marker4.bindPopup('點擊地圖使我移動 !');
                            marker4.openPopup();
                        }

                    }

                }, 2000);
            }
        });

        //marker4的默認位置
        var marker4 = L.Marker.movingMarker([
            [45.816667, 15.983333]
        ], []).addTo(map);

        //設置地圖的點擊事件，使標記移動到點擊的位置
        map.on("click", function (e) {
            marker4.moveTo(e.latlng, 2000);
        });

        //=========================================================================

        var marker5 = L.Marker.movingMarker(
            barcelonePerpignanPauBordeauxMarseilleMonaco,
            10000, {
                autostart: true
            }).addTo(map);

        marker5.addStation(1, 2000);
        marker5.addStation(2, 2000);
        marker5.addStation(3, 2000);
        marker5.addStation(4, 2000);

        L.polyline(barcelonePerpignanPauBordeauxMarseilleMonaco, {
            color: 'green'
        }).addTo(map);
       
    </script>
</body>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Leaflet中使用Leaflet.AnimatedMarker插件實現要素軌跡移動 Leaflet中使用leaflet-search插件實現搜索定位效果 Leaflet中使用markerCluster實現點聚合效果 OpenLayers 3 實現軌跡回放使用百度地圖API實現軌跡回放使用百度地圖API實現軌跡回放 Leaflet中使用Leaflet.draw插件實現圖形交互繪制和編輯(修改圖形坐標點) 微信小程序實現軌跡回放騰訊地圖教你快速實現軌跡回放騰訊地圖實現軌跡回放demo