高德地图api 常用JS组件

<  type=\"text/ \" src=\"http://webapi.amap.com/maps?v=1.4.6&key=你自己的key\"></ >
<!-- UI组件库 1.0 -->
<  src=\"http://webapi.amap.com/ui/1.0/main.js?v=1.0.11\"></ >
<  type=\"text/ \">
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;
        },
        getHover : 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\',  ,  ),
        },
    });

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