高德地图api 常用JS组件

版权声明：JiahaoZhang原创文章，转载请注明出处 https://blog.csdn.net/GrootBaby/article/details/85051883

<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>