高德地图动态绘制路线--moveAlong（vue）

最新推荐文章于 2025-03-12 17:09:51 发布

Lycorisradiata0619

最新推荐文章于 2025-03-12 17:09:51 发布

阅读量9.2k

点赞数 5

文章标签： vue.js

本文链接：https://blog.csdn.net/Lycoriy/article/details/108320032

版权

本文介绍如何在Vue项目中使用高德地图API实现动态路线绘制和轨迹巡航功能，包括地图初始化、路线路径设置、图标移动及路线跟随等关键技术点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

高德地图的引入和使用，详见高德地图动态绘制路线–轨迹巡航（vue）

动态绘制路线

<template>
    <div class="page_demo">
        <div id="container" class='container' :style="node"> </div>
    </div>
</template>

<script>
// import AMap from 'AMap'
export default {
    data () {
        return {
            screenHeight: document.documentElement.clientHeight,
            screenWidth: document.documentElement.clientWidth,
            node: {
                width: document.documentElement.clientWidth + 'px',
                height: document.documentElement.clientHeight + 'px'
            },
            marker: [],
            speed: 100
        }
    },
    mounted() {
        const that = this;
        // 初始化
        that.init();
        // 自适应
        window.onresize &