uni-app上有没有实现高德地图导航轨迹功能的？

发布于 1周前 作者 eggper 来自 Uni-App

uni-app上有没有实现高德地图导航轨迹功能的？

高德地图在uniapp上的使用

由于内置地图没有找到实现导航和轨迹的方法，想在uniapp上用高德地图实现导航和轨迹功能， 有没有在uniapp上实现过这些功能的？分享下，谢谢！

信息类型 信息
开发环境 uniapp
版本号 未知
项目创建方式 未知
Harmonyos Next教程
3 回复

高德地图导航插件 Q 1196097915


有现成的高德地图导航和持续定位uniapp插件（android和ios），联系QQ：16792999

在uni-app中实现高德地图导航轨迹功能是完全可行的。你可以通过集成高德地图的JavaScript API来完成这一功能。以下是一个基本的实现思路和代码示例，展示如何在uni-app中集成高德地图并实现导航轨迹功能。

步骤一：获取高德地图API Key

首先，你需要在高德开放平台（https://lbs.amap.com/）上申请一个API Key，这是访问高德地图服务所必需的。

步骤二：安装uni-app所需依赖

确保你的uni-app项目已经初始化，并安装必要的依赖（如@amap/amap-jsapi-loader，如果需要使用npm包来加载高德地图API）。不过，在uni-app中更常见的做法是直接通过script标签引入高德地图的JS SDK。

步骤三：引入高德地图JS SDK

在你的uni-app页面的<template>部分的<head>中，通过script标签引入高德地图的JS SDK：

<head>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的API_KEY"></script>
</head>

步骤四：实现导航轨迹功能

在你的uni-app页面的<script>部分，编写以下代码来初始化地图并实现导航轨迹功能：

export default {
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            const map = new AMap.Map('container', {
                zoom: 11,
                center: [116.397428, 39.90923]  // 北京的中心点坐标
            });

            // 假设你有一个包含轨迹点的数组
            const path = [
                [116.397128, 39.90923],
                [116.396428, 39.90853],
                // ...更多点
            ];

            // 创建导航折线
            const polyline = new AMap.Polyline({
                path: path,
                strokeColor: "#FF33FF",  // 线颜色
                strokeOpacity: 1,  // 线透明度
                strokeWeight: 6,  // 线宽
                strokeStyle: "solid",  // 线样式
                strokeDasharray: [10, 5],  // 虚线样式
                lineJoin: 'round'  // 折线拐点连接处样式
            });

            map.add(polyline);

            // 调用高德地图的驾车导航功能
            AMap.plugin('AMap.Driving', () => {
                const driving = new AMap.Driving({
                    policy: AMap.DrivingPolicy.LEAST_TIME, // 驾车策略
                    showTraffic: true, // 是否显示实时路况
                    map: map,
                    showPolyline: true,
                    polylineOptions: { // 导航路线规划后的折线样式
                        strokeColor: "#3366FF", // 线颜色
                        strokeOpacity: 1, // 线透明度
                        strokeWeight: 6, // 线宽
                        strokeStyle: "solid", // 线样式
                    }
                });

                driving.search(path[0], path[path.length - 1], (status, result) => {
                    if (status === 'complete') {
                        console.log('导航成功', result);
                    } else {
                        console.error('导航失败', result);
                    }
                });
            });
        }
    }
}

注意

  1. container是你在<template>中定义的用于显示地图的DOM元素的ID。
  2. 路径点path需要根据你的实际需求进行填充。
  3. 在实际项目中，请确保API Key的安全，不要将其暴露在客户端代码中。

通过上述步骤，你就可以在uni-app中实现高德地图的导航轨迹功能了。

回到顶部