<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=你自己的key"></script>
<!-- UI元件庫 1.0 -->
<script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
var wzMap = new AMap.Map('wzMapContainer', {
    resizeEnable: true, 
    zoom: 12,
    center: [121.348412,31.135244] 
});
wzMap.setMapStyle('amap://styles/darkblue');    //  標準 darkblue


var wzCenter = [121.348412,31.135244];  //座標
var wzCaobao = [121.373221,31.164957];  //座標
var wzChenhang = [121.482260,31.088360];  //座標
var wzChongnan = [121.474279,31.210149];  //座標
//  標記位置
var marker01 = new AMap.Marker({
    map: wzMap,
    position: wzCenter,
    icon: new AMap.Icon({ 
        image: "img/wzMark01.png",
        size: new AMap.Size(88, 60) //圖示大小
    }),
})
marker01.setLabel({
    offset: new AMap.Pixel(-40, 50),  //中心庫座標偏移位置
    content: '<div class="mapMarkerBG01">中心庫</div>',
})



var marker02 = new AMap.Marker({
    map: wzMap,
    position: wzCaobao,
    icon: new AMap.Icon({ 
        image: "",
        size: new AMap.Size(25, 25) //圖示大小
    })
})
marker02.setLabel({
    offset: new AMap.Pixel(-10, 4),  //座標偏移位置
    content: '<div class="mapMarkerBG"><span class="mapMarkerText">倉庫</span></div>',
});

var marker03 = new AMap.Marker({
    map: wzMap,
    position: wzChenhang,
    icon: new AMap.Icon({ 
        image: "",
        size: new AMap.Size(25, 25) //圖示大小
    })
})
marker03.setLabel({
    offset: new AMap.Pixel(-10, 4),  //座標偏移位置
    content: '<div class="mapMarkerBG"><span class="mapMarkerText">倉庫</span></div>',
});

var marker04 = new AMap.Marker({
    map: wzMap,
    position: wzChongnan,
    icon: new AMap.Icon({ 
        image: "",
        size: new AMap.Size(25, 25) //圖示大小
    })
})
marker04.setLabel({
    offset: new AMap.Pixel(-56, -92),  //已到達座標偏移位置
    content: '<div class="mapMarkerArrived"><div class="mapMarkerBGArrived"><span class="mapMarkerText">倉庫</span></div></div>',
});

// 地圖上覆蓋物較多的情況下，如果需要保證所有覆蓋物都在視野範圍內， 需要將地圖調整到合適的縮放等級和中心點，我們可以呼叫setFitView()方法
// wzMap.setFitView();

// 繪製軌跡
var polyline01 =new AMap.Polyline({
    map: wzMap,
    path: [wzCenter,wzCaobao],
    strokeColor: "#a0a0a0",  //線顏色
    strokeOpacity: 1,     //線透明度
    strokeWeight: 3,      //線寬，預設為 1
    strokeStyle: "solid"  //線樣式
});
var polyline02 =new AMap.Polyline({
    map: wzMap,
    path: [wzCenter,wzChenhang],
    strokeColor: "#15d729",  //線顏色
    strokeOpacity: 1,     //線透明度
    strokeWeight: 3,      //線寬，預設為 1
    strokeStyle: "dashed"  //線樣式
});
var polyline03 =new AMap.Polyline({
    map: wzMap,
    path: [wzCenter,wzChongnan],
    strokeColor: "#15d729",  //線顏色
    strokeOpacity: 1,     //線透明度
    strokeWeight: 3,      //線寬，預設為 1
    strokeStyle: "dashed"  //線樣式
});

AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

    if (!PathSimplifier.supportCanvas) {
        alert('當前環境不支援 Canvas！');
        return;
    }

    var pathSimplifierIns = new PathSimplifier({
        zIndex: 100,
        autoSetFitView:false,
        map: wzMap, //所屬的地圖例項

        getPath: function(pathData, pathIndex) {

            return pathData.path;
        },
        getHoverTitle: function(pathData, pathIndex, pointIndex) {

            if (pointIndex >= 0) {
                //point 
                return pathData.name + '，點：' + pointIndex + '/' + pathData.path.length;
            }

            return pathData.name + '，點數量' + pathData.path.length;
        },
        renderOptions: {
            "startPointStyle": {
                "radius": 1,
            },
            "endPointStyle": {
                "radius": 1,
            },
            "pathLineStyle": {
                "lineWidth": 2,
                "strokeStyle": "#000000",
                "borderWidth": 0,
            },
            "pathNavigatorStyle": {
                "autoRotate": false,
            },

            renderAllPointsIfNumberBelow: -1 //繪製路線節點，如不需要可設定為-1
        }
    });

    window.pathSimplifierIns = pathSimplifierIns;

    //設定資料
    pathSimplifierIns.setData([{
        name: '路線',
        path: [
            wzCenter,
            wzChenhang
        ]
    }]);

    //對第一條線路（即索引 0）建立一個巡航器
    var wzNavg = pathSimplifierIns.createPathNavigator(0, {
        loop: true, //迴圈播放
        speed: 10000, //巡航速度，單位千米/小時
        pathNavigatorStyle: {
            width: 59,
            height: 45,
            content: PathSimplifier.Render.Canvas.getImageContent('img/wzLegendCar.png', onload, onerror),
        },
    });

    wzNavg.start();
});
</script>