preface

The project used the Autonavi track map, then left a record. Code notes to write more detailed, do not do too much language.

The instance

index.html

<! doctypehtml>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="Initial - scale = 1.0, the user - the scalable = no, width = device - width">
    <title>Track display & cruise</title>
    <style>
        html.body.#container {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        .amap-marker-label {
            border: 0;
            background-color: transparent
        }
    </style>
</head>

<body>
<div id="container"></div>
<script src="./data.js"></script>
<script type="text/javascript" src='/ / webapi.amap.com/maps?v=1.4.15&key= your key'></script>
<! -- UI Component Library 1.0 -->
<script src="/ / webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script type="text/javascript">
    // Create a map
    var map = new AMap.Map('container');

    /** * Create cruiser */
    function initPath() {
        map.clearMap();
        if (window.pathSimplifierIns) {
            // Use this method to empty the last passed trace
            pathSimplifierIns.setData([]);
        }
        AMapUI.load(['ui/misc/PathSimplifier'].function (PathSimplifier) {
            if(! PathSimplifier.supportCanvas) { alert('Canvas is not supported in current environment! Unable to display path ');
                return
            }
            let pathSimplifierIns = new PathSimplifier({
                zIndex: 100.map: map,
                data: [{name: "Test path".path: PathSimplifier.getGeodesicPath([116.405289.39.904987], [87.61792.43.793308].300)},getPath: function (pathData, pathIndex) {
                    return pathData.path;
                },
                getHoverTitle: function (pathData, pathIndex, pointIndex) {
                    // Hover over the wire between nodes
                    return 'Test path'
                },
                autoSetFitView: true.renderOptions: {
                    // Trace line style
                    pathLineStyle: {
                        strokeStyle: '#E04356'.lineWidth: 10.dirArrowStyle: true}}});window.pathSimplifierIns = pathSimplifierIns;
            // setData can be used to add routes later
            // pathSimplifierIns.setData([{
            // name: 'Test',
            / / path: PathSimplifier. GetGeodesicPath ([116.405289, 39.904987], [87.61792, 43.793308], 300).
            // }]);
            pathSimplifierIns.createPathNavigator(0, {
                loop: true.// Loop
                speed: 300000,
            }).start()
        });
    }

    /** * Create a custom annotation *@param pointArr* /
    function fixedPoint(pointArr) {
        // Clear page elements
        map.clearMap();
        for (let i = 0; i < pointArr.length; i++) {
            let info = [],
                labelContent = ' ';
            switch (pointArr[i].type) {
                case 'start':
                    / / start '
                    labelContent = '
       
 
       
'
                    pointArr[i].address ? info.push('The starting point of the order selected by passengers:${pointArr[i].address}`) : info.push(' ')
                    break;
                case 'end':
                    / / the end
                    labelContent = '
       
 
       
'
                    pointArr[i].address ? info.push('Destination of the order selected by passengers:${pointArr[i].address}`) : info.push(' ');
                    break;
                default:
                    break;
            }
            // Custom annotations
            let icon = new AMap.Icon({
                size: new AMap.Size(95.50), // Icon size
                image: './icon.png'.// Image of Icon
                imageOffset: new AMap.Pixel(0.0), // The offset of the image relative to the display area, suitable for Sprite, etc
                imageSize: new AMap.Size(95.50)   // Stretch or compress the image according to the size set
            });
            let marker = new AMap.Marker({
                position: new AMap.LngLat(
                    pointArr[i].point.lon,
                    pointArr[i].point.lat
                ),
                offset: new AMap.Pixel(0.0),
                icon: icon, // Add Icon instance publishing endpoint
                zoom: 13.anchor: "bottom-center".// Set the anchor position
                label: {
                    content: labelContent,
                    offset: new AMap.Pixel(0, -5)}});// Information window
            var infoWindow = new AMap.InfoWindow({
                offset: new AMap.Pixel(0.0),
                content: info.join('<br/>')});// The custom information form amap1.x and 2.x versions are written differently
            AMap.event.addListener(marker, 'click'.function () {
                infoWindow.open(map, marker.getPosition());
            });
            map.add(marker);
            // Zoom to the appropriate view
            map.setFitView();
        }
    }

    initPath();
    fixedPoint(data.mapPointList);
</script>
</body>

</html>
Copy the code

data.js

const data = {
    mapPointList: [
        {
            point: {
                lat: 39.904987,
                lon: 116.405289,
            },
            type: "start",
            address: "Starting Point: Beijing",
        },
        {
            point: {
                lat: 43.793308,
                lon: 87.61792,
            },
            type: "end",
            address: "Destination: Urumqi",},],}Copy the code

The effect

conclusion

If you think this article is helpful to you, please like, comment and forward. The source code is first published in the language documentation @is_tao