高德地圖Marker平滑移動

功能需求：要求實時從背景擷取資料，标記在地圖上，要求從一個點到另一個點的移動的是平滑的

實作思想：參考高德api的巡航（參考手冊—UI元件——>軌迹展示）

AMapUI.load(['ui/misc/PathSimplifier'], function(PathSimplifier, $) {
        if (!PathSimplifier.supportCanvas) {
            alert('目前環境不支援 Canvas！');
            return;
        }

        var emptyLineStyle = {
            lineWidth: 0,
            fillStyle: null,
            strokeStyle: null,
            borderStyle: null
        };

        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            autoSetFitView:true,
            map: GADMap, //所屬的地圖執行個體

            getPath: function(pathData, pathIndex) {
                return pathData.path;
            },
            getHoverTitle: function(pathData, pathIndex, pointIndex) {
                return null;
            },
            /*renderOptions: {
                renderAllPointsIfNumberBelow: 100 //繪制路線節點，如不需要可設定為-1
            }*/
            renderOptions: {
                //将點、線相關的style全部置emptyLineStyle
                pathLineStyle: emptyLineStyle,
                pathLineSelectedStyle: emptyLineStyle,
                pathLineHoverStyle: emptyLineStyle,
                keyPointStyle: emptyLineStyle,
                startPointStyle: emptyLineStyle,
                endPointStyle: emptyLineStyle,
                keyPointHoverStyle: emptyLineStyle,
                keyPointOnSelectedPathLineStyle: emptyLineStyle
            }
        });

        window.pathSimplifierIns = pathSimplifierIns;

        pathSimplifierIns.setData([{
            //name: '測試',
            name: vehicle.regname,
            path: LLDataArr
        }]);

        function onload() {
            pathSimplifierIns.renderLater();
        }

        function onerror(e) {
            alert('圖檔加載失敗！');
        }

        if(pathSimplifierIns.getPathNavigators().length<1){
                navg1 = pathSimplifierIns.createPathNavigator(0, {
                    loop: false,
                   // speed:600,//KM/H
                    speed:speed,//KM/H
                    pathNavigatorStyle: {
                        width: 20,
                        height: 20,
                        //使用圖檔
                        content: PathSimplifier.Render.Canvas.getImageContent('images/loCars/car/alert-0_s.png', onload, onerror),
                        strokeStyle: null,
                        fillStyle: null,
                        pathLinePassedStyle: {
                            lineWidth: 0,
                            strokeStyle: '#fcfcfc',
                            dirArrowStyle: {
                                stepSpace: 5,
                                strokeStyle: 'white'
                            },
                            startPointStyle: {
                                radius: 4,
                                fillStyle: '#109618',
                                lineWidth: 1,
                                strokeStyle: '#eeeeee'
                            },
                        }
                    }
                });
        }
        navg1.start();
    });
if(window.pathSimplifierIns){
        pathSimplifierIns.setData([]);
    }
           

因為功能要求，是以在Marker移動過程中沒有設定軌迹線，renderOptions是設定樣式都為空，如果需要軌迹線樣式的話，可以api進行相應的renderOptions和pathLinePassedStyle等的屬性設定。

在實作過程中，因為軌迹是一段一段标記的，每标記一段都會出現一個巡航器圖示，是以我采用的辦法是在每段繪制完成後，清除相關圖示等，實作是上面代碼塊的最後一個if判斷。

在建立巡航器之前進行了判斷，如果已經存在巡航器，就不再建立巡航器，這樣可以保證隻有一個巡航器，因為巡航器的數量多的話也影響性能。

還有要注意：要在頁面引入如下檔案，

<base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" target="_blank" rel="external nofollow"  />
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=646a98c5d6b164044c4cc4345b7b22a0"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 <script src="//webapi.amap.com/ui/1.0/main.js"></script>
           

在運作過程中出現如下問題，可以換個浏覽器試試，我是在火狐中會出現這個問題，在IE中不會出現，但在火狐中，有時候很莫名其妙地這個問題就好了

清除軌迹線，參考了https://blog.csdn.net/ProgramarQin/article/details/79506214，感謝！！！