高德地图api Js巡航轨迹

您好！对于高德地图API的JS巡航轨迹，您可以使用AMap.Driving插件来实现，以下是一个简单的示例代码：

// 初始化地图
var map = new AMap.Map('mapContainer', {
  zoom: 13,
  center: [116.39, 39.9]
});

// 创建巡航轨迹
var driving = new AMap.Driving({
  map: map,
  panel: 'panel'
});

// 设置起点和途经点
var origin = [116.481028, 39.989643];
var waypoints = [
  [116.434446, 39.90816],
  [116.357483, 39.907234],
  [116.328683, 39.909683]
];

// 开始巡航
driving.search(origin, waypoints);

这段代码会在指定的地图上显示起点、途经点和终点，并绘制出巡航轨迹。您可以将代码中的起点、途经点和终点的经纬度替换为您需要的位置坐标。同时，您还可以通过调整参数来满足您的需求，例如设置地图的缩放级别、巡航策略等。

请注意，使用高德地图API需要引入相关的JavaScript库文件，并且需要在高德开放平台申请并获取到有效的API Key。

相关问题

高德地图轨迹展示&巡航，巡航结束事件

要在高德地图上展示轨迹并实现巡航效果，可以使用 Vue.js 结合高德地图 JavaScript API。下面是一个简单的示例代码：

<template>
  <div>
    <div id="map" style="width: 800px; height: 600px;"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 创建地图
    const map = new AMap.Map('map', {
      zoom: 15,
      center: [116.39, 39.9]
    });

    // 定义轨迹路径
    const path = [
      [116.39, 39.9],
      [116.4, 39.91],
      [116.41, 39.92],
      // ...
    ];

    // 创建轨迹线
    const polyline = new AMap.Polyline({
      map: map,
      path: path,
      strokeColor: '#3366FF',
      strokeOpacity: 1,
      strokeWeight: 3
    });

    // 创建小车标记
    const marker = new AMap.Marker({
      map: map,
      icon: new AMap.Icon({
        size: new AMap.Size(50, 50),
        image: 'https://webapi.amap.com/images/car.png',
        imageSize: new AMap.Size(50, 50)
      })
    });

    // 设置小车标记的位置和角度
    function setMarkerPosition(position) {
      marker.setPosition(position);
      marker.setAngle(getAngle(position));
    }

    // 获取小车标记的角度
    function getAngle(position) {
      // 根据当前位置和下一个位置计算角度
      // ...
    }

    // 小车巡航的动画
    function cruise() {
      let index = 0;
      const timer = setInterval(() => {
        setMarkerPosition(path[index]);
        index++;
        if (index >= path.length) {
          clearInterval(timer);
          // 触发巡航结束事件
          this.$emit('cruiseFinish');
        }
      }, 1000);
    }

    // 开始小车巡航
    cruise();
  }
}
</script>

在上述代码中，使用 AMap.Polyline 创建轨迹线，并使用 AMap.Marker 创建小车标记。通过设置小车标记的位置和角度实现小车在轨迹上的移动效果。当巡航结束时，通过 `$emit` 方法触发 `cruiseFinish` 事件。

在父组件中，可以监听 `cruiseFinish` 事件并执行相应的操作。例如：

<template>
  <div>
    <my-map @cruiseFinish="handleCruiseFinish"></my-map>
  </div>
</template>

<script>
import MyMap from './MyMap.vue';

export default {
  components: {
    MyMap
  },
  methods: {
    handleCruiseFinish() {
      console.log('巡航结束');
      // 执行巡航结束后的操作
    }
  }
}
</script>

在父组件中，通过监听 `cruiseFinish` 事件可以捕获巡航结束的时机，并执行相应的操作。