精华内容
下载资源
问答
  • 高德Api绘制线路轨迹

    2021-05-19 15:37:50
    绘制线路轨迹可通过定时器画Polyline实现效果,但是高德api中有moveAlong方法,实现起来更简单,下面是示例。 let marker = new AMap.Marker({ map: map, icon: this.icon, // 事先定义 }); let passedPolyline =...

    绘制线路轨迹可通过定时器画Polyline实现效果,但是高德api中有moveAlong方法,实现起来更简单,下面是示例。

    let marker = new AMap.Marker({
    	map: map,
    	icon: this.icon, // 事先定义
    });
    let passedPolyline = new AMap.Polyline({
    	 map: map,
    	 strokeColor: 'red', //线颜色
    	 strokeOpacity: 1, //线透明度
    	 strokeWeight: 6, //线宽
    });
    marker.on("moving", function (e) {
     passedPolyline.setPath(e.passedPath);
    });
    marker.moveAlong(arr, 1000); 
    
    // arr 为线路数组 格式为 arr:[[120,36],[121,36],[122,37]]
    
    展开全文
  • 主要介绍了在vue中高德地图引入和轨迹绘制的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 高德地图常用API.zip

    2020-07-15 09:39:48
    高德地图API 所含资源有:点聚合,自定义图标修改,自定义修改弹窗,图形工具点,线,矩形绘制,车辆轨迹回放动画路线。
  • Vue项目引用高德地图实现车辆轨迹回放 一、引入高德地图jsApi 在项目入口index.html页面以cdn方式引入 <script src="https://webapi.amap.com/maps?v=1.4.15&key=1bccd008f8fec2fdd171c1a3ce3b0ba9&...

    一、引入高德地图jsApi

    在项目入口index.html页面以cdn方式引入

    	<script src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请高德key值&plugin=AMap.DistrictSearch" ignore></script>
    

    效果图

    二、封装高德公共库

    在项目下新建公共js库

    公共函数库:until/index.js

    export default {
        /**
         * 判断数组格式并长度是否大于0
         * @param { Array } arr 数组
         * @returns true / false
         */
        checkArray(arr = []) {
            if (arr instanceof Array) {
                if (arr.length > 0) {
                    return true
                }
                return false
            }
            return false
        },
    }
    

    高德地图工具库:until/amap.common.js

    export default {
        /**
         * 高德地图初始化
         * @param {*} map 地图初始化对象
         * @param { Array } center 中心点
         * @param { Number } zoom 地图层级
         * @param { Boolean } resizeEnable 是否监控地图容器尺寸变化 默认`true`
         */
        create(id = 'map', { center, zoom, resizeEnable = true }) {
            this.map = new AMap.Map(id, {
                center: center,
                zoom: zoom,
                resizeEnable: resizeEnable
            })
        },
        /**
         * 地图加载完成
         */
        mounted() {
            return new Promise((resolve) => {
                this.map.on('complete', function() {
                    resolve()
                })
            })
        },
        /**
         * 地图销毁
         */
        destroy() {
            return new Promise((resolve) => {
                this.map && this.map.destroy()
                resolve()
            })
        },
        /**
         * 设置地图主题样式
         * @param { String } theme 主题名称 默认`darkblue`极夜蓝
         */
        setStyle({ theme = 'darkblue' }) {
            let styleName = `amap://styles/${theme}`
            this.map.setMapStyle(styleName);
        },
        /**
         * 设置地图中心点
         * @param { Array } center 地图中心点坐标
         */
        setCenter({ center }) {
            this.map.setCenter(center)
        },
        /**
         * 设置地图缩放比例
         * @param { Number } zoom 缩放比例 默认`15`
         */
        setZoom({ zoom = 15 }) {
            this.map.setZoom(zoom)
        },
        /**
         * 添加Icon
         * @param { Function } size 图标尺寸
         * @param { String } image 图标地址
         * @param { Function } imageSize 图标所用图片大小
         * @param { Function } imageOffset 图标取图偏移量
         */
        addIcon({ size, image, imageSize, imageOffset }) {
            return new AMap.Icon({
                size: size,
                image: image,
                imageSize: imageSize,
                imageOffset: imageOffset
            })
        },
        /**
         * 添加点标记
         * @param { String / Function } icon 点标记图片
         * @param { Array } position 点标记位置
         * @param { Function } offset 点标记偏移量
         * @param { Boolean } autoRotation 是否可旋转 默认`true`
         * @param { Number } angle 点标记的旋转角度
         * @param { Number } zIndex 覆盖物的叠加顺序。默认叠加顺序为先添加的在底层,后添加的在上层。通过该属性可调整叠加顺序,使级别较高的覆盖物在上层显示
         */
        addMarker({ icon, position, offset, autoRotation = true, angle, zIndex = 1 }) {
            return new AMap.Marker({
                map: this.map,
                icon: icon,
                position: position,
                offset: offset,
                autoRotation: autoRotation,
                angle: angle,
                zIndex: zIndex
            })
        },
        /**
         * 添加自定义点标记
         * @param { String } content 点标记标签
         * @param { Array } position 点标记位置
         * @param { Function } size 点标记大小
         * @param { Function } offset 点标记偏移量
         * @param { Number } zIndex 覆盖物的叠加顺序。默认叠加顺序为先添加的在底层,后添加的在上层。通过该属性可调整叠加顺序,使级别较高的覆盖物在上层显示
         */
        addRippleMarkers({ content, position, size, offset, zIndex = 1 }) {
            return new AMap.Marker({
                map: this.map,
                content: content,
                position: position,
                size: size,
                offset: offset,
                zIndex: zIndex
            })
        },
        /**
         * 删除多个点标记
         * @param { Array } marker 点标记集合
         */
        removeMarker(marker) {
            return new Promise((resolve) => {
                this.map.remove(marker)
                resolve()
            })
        },
        /**
         * 删除所有点标记
         */
        clearMarker() {
            return new Promise((resolve) => {
                this.map.clearMap()
                resolve()
            })
        },
        /**
         * 绘制轨迹路线
         * @param { Array } path 轨迹线经纬度坐标数据 二维数组 如:[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549]]
         * @param { Boolean } showDir 是否在轨迹线绘制箭头指引 默认`true`
         * @param { String } strokeColor 轨迹线颜色
         * @param { Number } strokeOpacity 轨迹线透明度 默认`1`
         * @param { Number } strokeWeight 轨迹线宽度
         * @param { Number } strokeStyle 轨迹线样式 实线:`solid`,虚线:`dashed` 默认`solid`
         * @param { Boolean } isOutline 线条是否带描边,默认`true`
         * @param { String } outlineColor 线条描边颜色,此项仅在`isOutline`为`true`时有效,默认:`#000000`
         * @param { Number } borderWeight 描边的宽度,默认为`1`
         * @param { String } lineJoin 折线拐点的绘制样式,默认值为`round`圆角,其他可选值:`miter`尖角、`bevel`斜角
         * @param { String } lineCap 折线两端线帽的绘制样式,默认值为`round`圆头,其他可选值:`butt`无头、`square`方头
         * @param { Number } zIndex 覆盖物的叠加顺序。默认叠加顺序为先添加的在底层,后添加的在上层。通过该属性可调整叠加顺序,使级别较高的覆盖物在上层显示
         */
        addLine({
            path,
            showDir = true,
            strokeColor,
            strokeOpacity = 1,
            strokeWeight,
            strokeStyle = 'solid',
            isOutline = true,
            outlineColor,
            borderWeight = 1,
            lineJoin = 'round',
            lineCap = 'round',
            zIndex = 1
        }) {
            return new AMap.Polyline({
                map: this.map,
                path: path,
                showDir: showDir,
                strokeColor: strokeColor,
                strokeOpacity: strokeOpacity,
                strokeWeight: strokeWeight,
                strokeStyle: strokeStyle,
                isOutline: isOutline,
                outlineColor: outlineColor,
                borderWeight: borderWeight,
                lineJoin: lineJoin,
                lineCap: lineCap,
                zIndex: zIndex
            })
        },
        /**
         * 绘制不规则多边形(可用于设置某区域高亮)
         * @param { String } strokeColor 线颜色
         * @param { Number } strokeOpacity 线透明度 默认`1`
         * @param { Number } strokeWeight 线宽度 默认`1`
         * @param { String } strokeStyle 线样式 实线:`solid`,虚线:`dashed` 默认`solid`
         * @param { String } fillColor 多边形背景颜色
         * @param { Number } fillOpacity 多边形透明度 默认`1`
         * @param { Number } zIndex 覆盖物的叠加顺序。默认叠加顺序为先添加的在底层,后添加的在上层。通过该属性可调整叠加顺序,使级别较高的覆盖物在上层显示
         * @param { Array } path 经纬度二维数组
         */
        addPolygon({ strokeColor, strokeOpacity = 1, strokeWeight = 1, strokeStyle, fillColor, fillOpacity = 1, zIndex = 1, path }) {
            return new AMap.Polygon({
                map: this.map,
                strokeColor: strokeColor,
                strokeOpacity: strokeOpacity,
                strokeWeight: strokeWeight,
                strokeStyle: strokeStyle,
                fillColor: fillColor,
                fillOpacity: fillOpacity,
                zIndex: zIndex,
                path: path
            })
        },
    }
    

    数据公共js: 'data/index.js'

    export default {
        // 轨迹经纬度数据
        pathLsit: [
            [109.075509, 34.398132],
            [109.075665, 34.398154],
            [109.075719, 34.398199],
            [109.075638, 34.398482],
            [109.075933, 34.398522],
            [109.075906, 34.398694],
            [109.075906, 34.398712],
            [109.075815, 34.398916],
            [109.075708, 34.399412],
            [109.075563, 34.399925],
            [109.075525, 34.400045],
            [109.075504, 34.400195],
            [109.075456, 34.400306],
            [109.075161, 34.401386],
            [109.075064, 34.401536],
            [109.075064, 34.401536],
            [109.074909, 34.402687],
            [109.074951, 34.402948],
            [109.07508, 34.403245],
            [109.075434, 34.403736],
            [109.076132, 34.404289],
            [109.076684, 34.404626],
            [109.076448, 34.404732],
            [109.076228, 34.405179],
            [109.076158, 34.405263],
            [109.075987, 34.405608],
            [109.075767, 34.405741]
        ],
        // 站点坐标
        siteList: [
            [109.075507, 34.398145],
            [109.075775, 34.405731],
            [109.075437, 34.405484],
            [109.075437, 34.405479],
            [109.075823, 34.407183]
        ],
        // 区域经纬度数据
        areaList: [
            [116.479123, 39.998431],
            [116.479155, 39.99848],
            [116.479252, 39.998546],
            [116.47967, 39.998497],
            [116.480217, 39.998406],
            [116.480367, 39.998398],
            [116.48055, 39.998332],
            [116.480829, 39.998291],
            [116.480829, 39.998291],
            [116.481569, 39.997979],
            [116.481547, 39.997962],
            [116.481547, 39.997962],
            [116.481547, 39.997962],
            [116.482931, 39.997132],
            [116.483082, 39.996894],
            [116.483425, 39.99631],
            [116.483581, 39.995957],
            [116.48372, 39.995431],
            [116.483763, 39.995373],
            [116.483763, 39.995373],
            [116.482712, 39.995275],
            [116.482046, 39.995217],
            [116.481896, 39.995143],
            [116.481671, 39.995028],
            [116.48137, 39.994831],
            [116.481156, 39.99474],
            [116.480984, 39.994592],
            [116.480855, 39.994362],
            [116.480609, 39.994223],
            [116.480501, 39.994042],
            [116.480233, 39.994099],
            [116.479707, 39.994519],
            [116.47768, 39.995875],
            [116.478034, 39.996162],
            [116.478463, 39.996524],
            [116.47871, 39.996614],
            [116.478763, 39.996771],
            [116.478838, 39.996951],
            [116.47886, 39.997214],
            [116.479032, 39.99742],
            [116.47901, 39.99751],
            [116.47901, 39.997757],
            [116.479032, 39.997954],
            [116.479085, 39.998045],
            [116.478978, 39.998373],
            [116.478924, 39.998546],
            [116.479123, 39.998431]
        ]
    }
    

    三、地图轨迹绘制实现

    <template>
        <div class="page">
            <div ref="map" id="map"  style="width: 100%; height: 100%;"></div>
            <div class="input-card">
                <h4>轨迹回放控制</h4>
                <div class="input-item">
                    <input type="button" class="btn" value="开始动画" id="start" @click.stop="startAnimation()"/>
                    <input type="button" class="btn" value="暂停动画" id="pause" @click.stop="pauseAnimation()"/>
                </div>
                <div class="input-item">
                    <input type="button" class="btn" value="继续动画" id="resume" @click.stop="resumeAnimation()"/>
                    <input type="button" class="btn" value="停止动画" id="stop" @click.stop="stopAnimation()"/>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    import $amap from './until/amap.common'
    import $common from './until/index'
    import Data from './data/index'
    export default {
        mixins: [],
        components: {},
        data() {
            return {
                car: null,
                pathLsit: Data.pathLsit,
                areaList: Data.areaList
            }
        },
        computed: {},
        created() {
            // this.pathLsit = this.pathLsit.reverse()
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                // 初始化地图
                $amap.create('map', {
                    center: this.pathLsit[0],
                    zoom: 17
                })
    
                // 设置地图主题
                $amap.setStyle({
                    theme: 'darkblue'
                })
    
                // 地图加载完成
                $amap.mounted().then(() => {
                    // 绘制站点
                    this.drawSiteMarker()
                    // 绘制车辆
                    this.drawCar()
                    // 绘制车辆行驶轨迹
                    this.drawLine()
                    // 绘制起点标记
                    this.drawStartMarker()
                    // 绘制终点标记
                    this.drawEndMarker()
    
                    // this.drawArea()
    
                    $amap.map.setFitView()
                })
            },
            // 绘制站点标记
            drawSiteMarker() {
                $common.checkArray(Data.siteList) ? Data.siteList.map((item) => {
                    $amap.addRippleMarkers({
                        content: `<div class="circle-marker-content">
                            <div class="item item1"></div>
                            <div class="item item2"></div>
                            <div class="item item3"></div>
                            <div class="item item4"></div>
                            <div class="item item5"></div>
                        </div>`,
                        position: item,
                        size: new AMap.Size(30, 30),
                        offset: new AMap.Pixel(0, 0),
                        zIndex: 2
                    })
                }) : ''
            },
            // 绘制小车
            drawCar() {
                this.car = $amap.addMarker({
                    position: this.pathLsit[0],
                    // icon: 'https://webapi.amap.com/images/car.png',
                    icon: require('@/assets/image/car.png'),
                    offset: new AMap.Pixel(-26, -12),
                    angle: -90,
                    zIndex: 3
                })
                this.car.moveAlong(this.pathLsit, 200)
            },
            // 绘制车辆行驶轨迹
            drawLine() {
                // 绘制轨迹
                $amap.addLine({
                    path: this.pathLsit,
                    strokeColor: '#28F',
                    strokeWeight: 6,
                    outlineColor: '#fff',
                    lineJoin: 'round',
                    zIndex: 1
                })
                // 绘制小车行驶走过的路线
                let passedPolyline = $amap.addLine({
                    path: this.pathLsit,
                    strokeColor: '#1A9F34',
                    strokeWeight: 6,
                    outlineColor: '#fff',
                    lineJoin: 'round',
                    zIndex: 1
                })
                // 小车移动监听
                this.car.on('moving', function (e) {
                    passedPolyline.setPath(e.passedPath)
                })
            },
            // 绘制起点
            drawStartMarker() {
                // 创建一个 Icon
                let startIcon = $amap.addIcon({
                    size: new AMap.Size(25, 34),
                    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
                    imageSize: new AMap.Size(135, 40),
                    imageOffset: new AMap.Pixel(-9, -3)
                })
                // 将 icon 传入 marker
                $amap.addMarker({
                    position: new AMap.LngLat(this.pathLsit[0].lng, this.pathLsit[0].lat),
                    icon: startIcon,
                    offset: new AMap.Pixel(-13, -30),
                    zIndex: 4
                })
            },
            // 绘制终点
            drawEndMarker() {
                // 创建一个 icon
                let endIcon = $amap.addIcon({
                    size: new AMap.Size(25, 34),
                    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
                    imageSize: new AMap.Size(135, 40),
                    imageOffset: new AMap.Pixel(-95, -3)
                })
                // 将 icon 传入 marker
                $amap.addMarker({
                    position: new AMap.LngLat(Data.pathLsit[this.pathLsit.length - 1].lng, Data.pathLsit[this.pathLsit.length - 1].lat),
                    icon: endIcon,
                    offset: new AMap.Pixel(-13, -30),
                    zIndex: 4
                })
            },
            // 开始动画
            startAnimation () {
                this.car.moveAlong(this.pathLsit, 200)
            },
            // 暂停动画
            pauseAnimation () {
                this.car.pauseMove()
            },
            // 继续动画
            resumeAnimation () {
                this.car.resumeMove()
            },
            // 停止动画
            stopAnimation () {
                this.car.stopMove()
            },
            // 绘制区域
            drawArea() {
                $amap.addPolygon({
                    strokeColor: '#C8DC00', //线颜色
                    strokeOpacity: 1, // 线透明度
                    strokeWeight: 2, // 线宽度
                    strokeStyle: 'solid', // 线样式 [dashed, solid]
                    fillColor: '#25A5F7', //遮罩层颜色
                    fillOpacity: 0.2, // 遮罩层透明度
                    path: this.areaList
                })
            }
        }
    }
    </script>
    
    <style scoped lang="scss">
        .page {
            position: relative;
            display: block;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
        .input-card{
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            z-index: 2;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border-radius: .25rem;
            width: 15rem;
            border-width: 0;
            border-radius: 0.4rem;
            padding: 0.75rem 1.25rem;
            h4{
                font-family: inherit;
                line-height: 1.8;
                font-weight: 300;
                color: inherit;
                font-size: 1.1rem;
                margin-top: 0;
                margin-bottom: .5rem;
            }
            .input-item {
                position: relative;
                display: -ms-flexbox;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                width: 100%;
                height: 2.6rem;
                .btn{
                    display: inline-block;
                    font-weight: 400;
                    text-align: center;
                    white-space: nowrap;
                    vertical-align: middle;
                    user-select: none;
                    border: 1px solid transparent;
                    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                    background-color: transparent;
                    background-image: none;
                    color: #25A5F7;
                    border-color: #25A5F7;
                    padding: .25rem .5rem;
                    line-height: 1.5;
                    border-radius: 1rem;
                    -webkit-appearance: button;
                    cursor: pointer;
                    margin-right: 1.2rem;
                    width: 5rem;
                    &:hover{
                        background: #25A5F7;
                        color: #fff;
                    }
                }
                .btn:last-child{
                    margin-right: 0;
                }
            }
        }
        /deep/.amap-marker {
            .amap-marker-content {
                position: relative;
            }
        }
        /deep/.circle-marker-content {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 1.8vh;
            width: 1.8vh;
            transform: translate(-50%, -50%);
            border-radius: 100%;
            text-align: center;
            background: #C8DC00;
            border: 1px solid #C8DC00;
            box-shadow: 0px 0px 14px #C8DC00;
    
            @keyframes scaless {
                0% {
                    transform: scale(0);
                    opacity: 1;
                }
    
                100% {
                    transform: scale(2);
                    opacity: 0;
                }
            }
    
            .item {
                width: 4vh;
                height: 4vh;
                position: absolute;
                border-radius: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
    
            .item:before {
                content: "";
                position: absolute;
                left: -1px;
                top: -1px;
                display: inline-block;
                width: 100%;
                height: 100%;
                border: 1px solid #C8DC00;
                border-radius: 100%;
                opacity: 0;
                background-color: #C8DC00;
                animation: scaless 5s infinite cubic-bezier(0, 0, 0.49, 1.02);
            }
    
            .item1:before {
                animation-delay: 0s;
            }
    
            .item2:before {
                animation-delay: 1s;
            }
    
            .item3:before {
                animation-delay: 2s;
            }
    
            .item4:before {
                animation-delay: 3s;
            }
    
            .item5::before {
                animation-delay: 4s;
            }
        }
    </style>
    
    
    展开全文
  • 高德地图 动态绘制多个路线轨迹

    万次阅读 2018-02-01 15:51:12
    最近在用高德地图API,顺便记录下。 平时我们只是通过如下代码,给path一串经纬度数组, 静态绘制修改路径,但怎么才能通过接收数据(例如Json数据)来动态绘制 多个路径呢? 这里有两种方法。 //设置数据 ...

    最近在用高德地图的API,顺便记录下。

    平时我们只是通过如下代码,给path一串经纬度数组, 静态绘制修改路径,但怎么才能通过接收数据(例如Json数据)来动态绘制 多个路径呢? 这里有两种方法。

    //设置数据
     pathSimplifierIns.setData([{
         name: '路线0',
         path: [
             [116.405289, 39.904987],
             [113.964458, 40.54664],
             [111.47836, 41.135964]
         ]
     }]);

    方法一:

    该方法是官方文档的Dome,
    思路: 用 $.getJSON(‘url’,function(){})函数,在其url中直接输入.json文件(文件里是 setData()可操作数组结构 的数据) 的路径,通过改变文件内容或 url 来动态绘制路径。

    查看官方Dome:点击这里
    查看数据的网址:点击这里
    效果图如下:
    效果图

    但是平时我们传的Json数据 的数据结构都是 setData()函数不可操作的,而且还夹杂了很多其他的不相关参数,所以方法一并不实用。

    方法二:

    这里我们只是将JSON的数据结构转换 为 setData()可操作的数据结构。
    思路:其中str为一串Json数据(就是字符串),首先将 Json字符串 转换为 Json对象,但由于该Json对象的数据结构 与 setData()可操作 数组的数据结构 不一致,所以要转换一下结构;转换结构后 直接将其传给 setData()即可。
    效果图如下:
    这里写图片描述

    源代码如下

    <!doctype html>
    <html lang="zh-CN">
    <head>
        <!-- 原始地址://webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/simple-data.html -->
        <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/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='//webapi.amap.com/maps?v=1.4.3&key=您申请的key值'></script>
        <!-- UI组件库 1.0 -->
        <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
        <script type="text/javascript">
        //创建地图
            var map = new AMap.Map('container', {
                zoom: 4
            });
    
            AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
    
                if (!PathSimplifier.supportCanvas) {
                    alert('当前环境不支持 Canvas!');
                    return;
                }
    
                var pathSimplifierIns = new PathSimplifier({
                    zIndex: 100,
                    //autoSetFitView:false,
                    map: map, //所属的地图实例
    
                    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: {
    
                        renderAllPointsIfNumberBelow: 100 //绘制路线节点,如不需要可设置为-1
                    }
                });
    
                window.pathSimplifierIns = pathSimplifierIns;
                /****************************开始: 用Json数据动态绘制多个路径 ****************************/
                 /*封装:Json字符串 转换为 Json对象*/
                var tranObj = function(str){
                    return JSON.parse(str);
                }
    
                /*封装:构造setData()可用数组*/
                var seltArr = function(obj){
                    var arr = []; 
                    for(var i=0;i<obj.length;i++){
                        arr.push({
                                    name:obj[i].name,
                                    path:[[obj[i].flng,obj[i].flat],[obj[i].tlng,obj[i].tlat]]
                                });
                    }
                    return arr;
                }
    
                /*str为Json数据: 
                    flng(出发地经度)、flat(出发地纬度)
                    tlng(目的地经度)、tlat(目的地纬度)
                    name:路径名称
                    missTimes:为其他数据,忽略*/
    
                var str = '[{ "name": "A->B","missTimes": "1", "flng": 116.856275, "flat": 39.874345, "tlng": 116.856245,"tlat": 39.87207},{ "name": "A->B","missTimes": "1", "flng": 116.857275, "flat": 39.876345, "tlng": 116.856345,"tlat": 39.87107},{"name": "C->D","missTimes": "2", "flng": 116.856575, "flat": 39.874345, "tlng": 116.856245,"tlat": 39.87507}]';
    
                /*Json字符串 转换为 Json对象*/
                var obj = tranObj(str); 
    
                /*构造setData()可用数组*/
                var myArr = seltArr(obj); 
    
                /*将可用数组传给 setData()绘制路线*/
                pathSimplifierIns.setData(myArr);
            /****************************  结束 ****************************/
                pathSimplifierIns.on('pointClick', function(e, info) {
    
                    console.log('Click: ' + info.pathData.points[info.pointIndex].name);
                });
                /*开个巡航器*/
                 var navg1 = pathSimplifierIns.createPathNavigator(0, {
                    loop: true, //循环播放
                    speed: 100 //巡航速度,单位千米/小时
                });
    
                navg1.start();
            });
        </script>
    </body>
    
    </html>

    看不懂上面代码的查看官方文档即可,
    PathSimplifier(轨迹展示):点击这里查看 官方相关文档

    展开全文
  • 主要的地方在于运用高德地图api,后台只起到查询作用,与一般无异这里不多赘述后台 map.html代码: 轨迹回放 #mapContainer{height:88%;width:98%; margin:5px auto; position:

    一实现效果:存入数据库的地址经纬度在地图上查看轨迹。

     


    可放大缩小查看详细地址:



    主要的地方在于运用高德地图api,后台只起到查询作用,与一般无异这里不多赘述后台


    map.html代码:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>轨迹回放</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=1a01722744d7d1bc6a29d1321853b93f"></script>
    
    <script src="/source/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/source/My97DatePicker/WdatePicker.js"></script> 
    <link rel="stylesheet" href="/source/css/dxt.css"/>
    <style>
    #mapContainer{height:88%;width:98%; margin:5px auto; position:relative; border:2px solid rgb(255,255,255) }
    </style>
    <body class="bg" >
    <div class="main_layout">
    <!-- 标题 -->
      <div class="title"> 
      <form>
      <label>任务时间:</label> <input id="d4311" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}',isShowClear:false,readOnly:true})"/> 
      <input type="button" value="搜索">
       </form>
      </div>
      <!-- 地图 -->
      <div id="mapContainer"></div>
     </div> 
      <script>
        var map;
       $(function(){
    	   init();
    	   getAjax();
    	  //绑定事件 
    	  $(".title input[type='button']").click(submitSerch);
       });
       var submitSerch=function(){
    	        var reg=/^([0-9]|[\-])*$/;
    	        var start=$("#d4311").val().trim();
    			 var end=$("#d4312").val().trim();
    			 var name=$(".name").val().trim();
    			 var ehr=$(".ehr").val().trim();
    			 
    	        if(start||end||name||ehr) {
    	         getAjax(start,end,name,ehr);
                }
    	   };
       function getAjax(start,end,name,ehr){
    	   $.ajax({
    		   url:"/taskTrajectory/selectTaskTrajectoryInfo",
    		   type:"get",
               dataType:"json",
               data:{"account":"15614141414",
            	     "taskTime":"2017-09-21"},
               success: function(data){ 
                 //初始化请求
                if(data!=null&&data.status==0){
                var result=data.result;
                if(result.length==0){
                  alert("抱歉,您当前没有访调轨迹!");
                }
                  //清楚显示
                  map.clearMap(); 
    			  line(result);	
    			  addMarker(result);
    			  }else{
    			  alert("您没有访调记录");
    			     }
    			 },
    		        });
    
    	   }
       
       
       function init(){
    	   //创建地图对象
    	  map = new AMap.Map("mapContainer", {
          resizeEnable: true,
          zoom: 12,
          mapStyle:"light"
         });
        
    	 //加载缩放条事件  
          map.plugin(["AMap.ToolBar"], function () {
          toolBar = new AMap.ToolBar();
          map.addControl(toolBar);
    	  
        });
    	 
    	   }
       function line(data){
    	   var lineArr =new Array();
    	   
    	   $.each(data,function(index,value){
    	   
    	    var array=(value.position).split(","); 
                lineArr.push(new AMap.LngLat(parseFloat(array[1]),parseFloat(array[0])));
    					});	
          // 绘制轨迹
         var polyline = new AMap.Polyline({
            map: map,
            path:lineArr,
            strokeColor: "rgb(104,180,255)",  //线颜色
            strokeOpacity: 1,     //线透明度
            strokeWeight: 2,      //线宽
            strokeStyle: "solid", //线样式
            geodesic: true       
          });
       map.setFitView(); 
    	 
    	 }
    	  
       function addMarker(data) {
    	   
     $.each(data,function(index,value){
     var array=(value.position).split(",");	 
     var p0 = parseFloat(array[1]);
     var p1 = parseFloat(array[0]);
     var action="AMAP_ANIMATION_DROP";
     var point = new AMap.LngLat(p0, p1);
     var marker = new AMap.Marker({
    	    id:index,
            map: map,
            position: point,
    	    icon:"/source/img/flag.png",
            autoRotation: true,
    		animation:action
    	 
    		}); 
    createInfoWindow(value,marker);
    		
    	});			   
    }
    function createInfoWindow(value, marker) {
    var info = [];
    /* info.push("<a href='/emplpyer/task/get/"+value.id+"' target='main'  ><div style='font-weight:bold;color:#000;font-family:'微软雅黑';text-align:center;font-size:'><div><img src='http://wiscc6911.qnoddns.org.cn:8400/file/web/download/10143.jpg' width='80' height='80'> "); */
    info.push("任务: "+value.taskName+"");
    info.push("时间 : "+value.taskTime+"");
    info.push("地址 :"+value.taskAddress+"</div></div></a>");
    
     var iw = new AMap.InfoWindow({
    	 content : info.join("<br>"),
    	 offset : new AMap.Pixel(0,-25),
    	 isCustom : false,
    	 autoMove : true
     });
     
     AMap.event.addListener(marker, "mouseover", function(e) {
     iw.open(map, marker.getPosition());
     });
    }
    
    
      </script>
    </body >
    
    </html>
    



    展开全文
  • 高德地图api文档 https://lbs.amap.com/api/javascript-api/summary 使用 1、在index.html里面引入高德地图js文件 2、引入之后我们就直接可以在vue组件里面使用了 创建initMap方法,在mounted钩子函数中调用 ...
  • 【目的】使用高德地图通过手机记录下的GPS坐标点绘制轨迹,这应该是一个很大的需求吧。 【高德apiDemo地址】https://lbs.amap.com/dev/demo/path-smooth#Android 【啰嗦一下】这是我今天从花都区狮岭的客户处回到...
  • 高德地图-实时导航,路径轨迹显示

    热门讨论 2016-04-01 11:19:58
    选择起点和终点后点击直接路径导航就会将导航路径及语音播报在地图上显示,由于是实时导航,过在未移动的情况下,移动车辆标记的为显示;代码中对网络及GPS是否连接都做了判断,起点是定位点的位置,终点则自己点击...
  • 现在很多应用中,会用到轨迹功能,但轨迹何如移动的平滑、漂亮? 高德将“轨迹平滑移动”作为一个开发小技巧开放出
  • uniapp打包app,使用高德地图绘制轨迹,实现驾车路径的规划 uniapp自身提供地图组件,但由于兼容性比较差,很多功能无法基于uni提供的api实现自己的需求点,所以这里我们借助web-view的方式去实现路线的规划,以及...
  • 首先,我们在确定了现目要使用高德API后,我们要从哪里入手开发呢? 1、首先要去官网上查阅文档,这一点很重要,你想要实现的功能官网的document中都会有介绍,但是呢,他只是简单的为你介绍一些回调函数,帮你梳理...
  • 基于高德地图API实现车辆轨迹回放并显示实时坐标

    万次阅读 热门讨论 2017-05-25 12:10:29
    // 绘制轨迹 var polyline = new AMap.Polyline({ map: map, path: lineArr, strokeColor: "#00A", //线颜色 //strokeOpacity: 1, //线透明度 strokeWeight: 3, //线宽 //strokeStyle: "solid" //线样式 })...
  • android-高德地图:实时轨迹实现

    万次阅读 2018-12-08 15:53:56
    如果需要使用百度地图定位与轨迹sdk请右拐传送门:android-百度地图:鹰眼轨迹的实时绘制,或者走对门:百度地图:定位,轨迹,白板,加载崩溃,定位到非洲。 1.准备 获取key 咳咳,由于高德开发文档比较完善...
  • 1、将高德地图引入项目 第一步:在index.html文件中引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key"></script> <script src="//webapi.a...
  • 高德地图-绘制路线

    万次阅读 2019-04-23 14:14:30
    高德地图-绘制路线 效果如下图: #步骤一:使用高德地图 JS API 开发地图应用之前的一些准备工作 1.1. 在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key; HTML <...
  • 一、前言 最近在做一个共享汽车出行平台可视化的项目,用户提供的数据本身只包含起止点,但是用户想查看每天使用用户的动态轨迹信息展示...轨迹的模拟,我这里真正有用的信息是轨迹点,查找了下百度和高德地图开...
  • 在做项目中,碰到提供给用户radio-box,让用户选择看哪条轨迹高德地图js api手册只是陈列了方法.hide()以及.show(),但没有仔细介绍如何使用方法,实例中也没有使用。 (调用Amap这里就不讲了) 我在网上搜了很多...
  • 如何使用高德地图API

    千次阅读 2021-02-20 16:10:40
    今天分享一下高德地图API的基本使用步骤及方法 高德开放平台直通车: https://developer.amap.com 首先根据自身需求及提示完成注册,注册完成后,在使用地图之前还需要为应用 添加Key(一定要先登录在添加Key) 首先...
  • 高德地图API路径规划结果清除

    千次阅读 2018-10-01 21:09:22
    关于高德地图API之路径规划结果的清除(js API) 偶然用到高德地图API做路径规划,在做的过程中发现连续进行不同的路径规划产生的结果是叠加的。如何清除上一次的路径规划呢?开发手册上有一个**clear()**函数,就是...
  • js 高德地图根据后台坐标绘制轨迹

    万次阅读 2017-05-27 16:49:07
    项目为快递管理系统,要求有两种物流跟踪方式,一种为时间轴,一种为地图方式。 后期调试完成会再修改    //这里可以传入后台的json数据,类似此格式  var pointList=[  {    lng:116.397428,  lat:39....
  • 高德地图js api 轨迹回放 多人并且控制谁先播放 先附上图片: 一.数据部分 function startRun() { //动画方法  var ifr = document.getElementById('iframeRight');  var targetOrigin = '*'; ...
  • 毕业设计相关,使用高德JS API绘制轨迹,但是出现了第一条轨迹和第二条轨迹相连的情况。非常的不解,![图片说明](https://img-ask.csdn.net/upload/201903/23/1553273833_246144.png) 后端使用的是flask,数据...
  • 开发需求 在地图绘制三条线路 其中两条 为 请求接口返回(项目自己的数据 北斗&app),另外一条调取高德的路线规划接口,将返回的数据进行处理,然后根据需求绘制三条折线 线路 实现效果 高德 开放平台 文档参考 ...
  • //初始化地图 plugins();//插件加载 menus(); //rightMenu();//右键菜单 }) var map; var placeSearch; var lng1; var lat1; var lng2; var lat2; var driving; var marker; var startIcon; var endIcon; var ...
  • js高德地图绘制路线并轨迹纠偏

    千次阅读 2018-07-24 11:24:50
    引入下面三个js文件 &...http://webapi.amap.com/maps?v=1.4.6&amp;key=你所申请的key值"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="...
  • 高德地图历史轨迹

    2020-07-15 17:03:54
    // 绘制轨迹 let polyline = new AMap.Polyline({ map: that.map, path: that.linePoints, showDir: true, strokeColor: "#28F", //线颜色 strokeOpacity: 1, //线透明度 strokeWeight: 6 //线宽 strokeStyle: ...
  • vue使用高德地图做车辆轨迹展示

    千次阅读 2020-11-23 16:51:31
    使用前准备 : 高德地图key 使用插件: vue-amap 1.npm安装vue-amap npm install vue-amap --save 2 在mai.js中引入 import AMap from 'vue-amap'; Vue.use(AMap); AMap.initAMapApiLoader({ key: "自己申请的key", ...
  • 高德地图添加路线,移除路线以及更改路线颜色、宽度等操作 高德地图其他操作都很简单就没有涉及
  • 里面包含了elementui结合高德地图的定位已经位置标记相关的资料,里面的定位组件下载就可使用,包含组件和说明文档。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 474
精华内容 189
关键字:

高德地图api绘制轨迹