2021-09-06

最新推荐文章于 2024-04-16 16:09:50 发布

咸鱼探索者

最新推荐文章于 2024-04-16 16:09:50 发布

阅读量112

点赞数

分类专栏：前端学习之路文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_43461759/article/details/120138932

版权

前端学习之路专栏收录该内容

8 篇文章 0 订阅

订阅专栏

记录一下学习高德地图api

轨迹巡航，结合信息框，利用AMapUI组件库做到框随车走的案例

代码示例

<!-- 重点参数：renderOptions，pathLinePassedStyle -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/only-passed.html -->
    <base href="http://webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/" />
    <base href="http://webapi.amap.com/ui/1.1/ui/overlay/SimpleInfoWindow/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>仅展示驶过线</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }

    </style>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript" src='http://webapi.amap.com/maps?v=2.0&key=879887c10115f207c5f0286af3498e22'></script>
    <!-- UI组件库 1.0 -->
    <script src="http://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 3
    });

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

        if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }

        var emptyLineStyle = {
            lineWidth: 0,
            fillStyle: null,
            strokeStyle: null,
            borderStyle: null
        };
        var marker = new AMap.Marker({
            map: map,
            zIndex: 100,
            postion: routeinfo
        });

        var infoWindow = new SimpleInfoWindow({
            //模板, underscore
            infoTitle: '<strong><%- title %></strong>',
            infoBody: '<p class="my-desc">' +
                //<%= 原值插入 ..
                '<%= img %>' +
                //<%- html编码后插入
                '<%- body %>' +
                '</p>',
            //模板数据
            infoTplData: {
                title: '"标题-标题"',
                img: '<img src="http://webapi.amap.com/theme/v1.3/autonavi.png" />',
                body: '<---------内容--------->'
            },

            //基点指向marker的头部位置
            offset: new AMap.Pixel(0, -31)
        });



        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: map, //所属的地图实例

            getPath: function(pathData, pathIndex) {
                console.log(pathData);

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

                return null;
            },
            renderOptions: {
                //将点、线相关的style全部置emptyLineStyle
                pathLineStyle: emptyLineStyle,
                pathLineSelectedStyle: emptyLineStyle,
                pathLineHoverStyle: emptyLineStyle,
                keyPointStyle: emptyLineStyle,
                startPointStyle: emptyLineStyle,
                endPointStyle: emptyLineStyle,
                keyPointHoverStyle: emptyLineStyle,
                keyPointOnSelectedPathLineStyle: emptyLineStyle
            }
        });

        window.pathSimplifierIns = pathSimplifierIns;
        var routeinfo=[[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]]


        pathSimplifierIns.setData([{
            name: '测试',
            path:routeinfo
     }]);
        infoWindow.setMap(map);
         infoWindow.open(map, marker.getPosition());

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

        function onerror(e) {
            alert('图片加载失败！');
        }

        var navg1 = pathSimplifierIns.createPathNavigator(0, {
            loop: false,
            speed: 100,
            pathNavigatorStyle: {
                width: 30,
                height: 30,
                //使用图片
                content: PathSimplifier.Render.Canvas.getImageContent('./imgs/car.png', onload, onerror),
                strokeStyle: null,
                fillStyle: null,
                //经过路径的样式
                pathLinePassedStyle: {
                    lineWidth: 6,
                    strokeStyle: 'pink',
                }
            }
        });
     navg1.on('move',function(value){
        let currentPosition=navg1.getPosition();
        infoWindow.setPosition([currentPosition.lng,currentPosition.lat])
        });
        navg1.start();

    });
    </script>
</body>

</html>

咸鱼探索者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-09-06

记录一下学习高德地图api轨迹巡航，结合信息框，利用AMapUI组件库做到框随车走的案例代码示例<!doctype html><html lang="zh-CN"><head> <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/only-passed.htm
复制链接

扫一扫