// 计算两者之间的距离 distance() { const R = 6371; // 地球半径，单位千米 const lat1 = this.markers[0].latitude; const lon1 = this.markers[0].longitude; const lat2 = this.markersn[0].latitude const lon2 = this.markersn[0].longitude const dLat = this.rad(lat2 - lat1); const dLon = this.rad(lon2 - lon1); const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.rad(lat1)) * Math.cos(this.rad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); const d = R * c * 1000; // 转为米 return d.toFixed(2); }, // 辅助方法，将角度转为弧度 rad(d) { return d * Math.PI / 180.0; }, uniapp中，令以上代码每隔一秒钟便自动调用一次

你可以使用 `setInterval` 函数来实现每隔一秒钟自动调用 `distance` 方法。

示例代码：

// 在页面加载完成后调用
mounted() {
  // 每隔一秒钟调用一次 distance 方法
  setInterval(() => {
    const d = this.distance();
    console.log(`距离为：${d} 米`);
  }, 1000);
},

请注意，`setInterval` 函数的第二个参数是时间间隔，单位是毫秒。在上面的示例中，我们将时间间隔设置为 1000 毫秒（即 1 秒钟）。

相关问题

uniapp的map组件，显示标记距离

Uniapp的map组件可以通过计算两个标记之间的距离来显示它们之间的距离。可以使用Haversine公式来计算两个地理位置之间的距离，该公式可以计算出两个经纬度之间的距离。以下是一个示例代码，可以根据需要进行修改：

<template>
  <view>
    <map :polyline="polyline" :markers="markers"></map>
    <view>{{distance}} km</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      polyline: [],
      markers: [{
        id: 1,
        latitude: 39.90469,
        longitude: 116.40717,
        label: {
          content: '北京市',
          color: '#FF0000',
          fontSize: 16,
          borderRadius: 10,
          bgColor: '#FFFFFF',
          padding: 5
        }
      }, {
        id: 2,
        latitude: 31.23037,
        longitude: 121.4737,
        label: {
          content: '上海市',
          color: '#FF0000',
          fontSize: 16,
          borderRadius: 10,
          bgColor: '#FFFFFF',
          padding: 5
        }
      }],
      distance: ''
    }
  },
  methods: {
    getDistance(lat1, lng1, lat2, lng2) {
      const radLat1 = lat1 * Math.PI / 180.0;
      const radLat2 = lat2 * Math.PI / 180.0;
      const a = radLat1 - radLat2;
      const b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
      let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
      s = s * 6378.137;
      s = Math.round(s * 10000) / 10000;
      return s.toFixed(2);
    },
    updateDistance() {
      const marker1 = this.markers[0];
      const marker2 = this.markers[1];
      this.distance = this.getDistance(marker1.latitude, marker1.longitude, marker2.latitude, marker2.longitude);
    }
  },
  mounted() {
    this.polyline = [{
      points: [{
        latitude: this.markers[0].latitude,
        longitude: this.markers[0].longitude
      }, {
        latitude: this.markers[1].latitude,
        longitude: this.markers[1].longitude
      }],
      color: "#FF0000DD",
      width: 2,
      dottedLine: true
    }];
    this.updateDistance();
  }
}
</script>

在上面的代码中，我们使用了getDistance方法来计算两个标记之间的距离，并在页面上显示它。我们还使用了polyline属性来绘制标记之间的连线，并使用markers属性来设置标记的位置和标注信息。在mounted方法中，我们初始化了polyline和distance，并调用了updateDistance方法来计算并显示距离。

使用vue2，写一个含有许多辆汽车的车辆轨迹图

好的，以下是一个简单的示例代码：

<template>
  <div id="map"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null, // 地图对象
      markers: [], // 标记点数组
      paths: [], // 轨迹线数组
      cars: [ // 汽车数组
        {
          id: 1,
          name: 'Audi',
          lng: 116.397128,
          lat: 39.916527,
          speed: 50,
          direction: 30
        },
        {
          id: 2,
          name: 'BMW',
          lng: 116.407718,
          lat: 39.912515,
          speed: 60,
          direction: -45
        },
        // 可以添加更多汽车
      ]
    }
  },
  mounted() {
    // 初始化地图
    this.map = new window.BMap.Map("map");
    this.map.centerAndZoom(new window.BMap.Point(116.404, 39.915), 13);

    // 添加标记点和轨迹线
    this.addMarkers();
    this.addPaths();

    // 开始动画
    this.startAnimation();
  },
  methods: {
    // 添加标记点
    addMarkers() {
      this.cars.forEach(car => {
        const marker = new window.BMap.Marker(new window.BMap.Point(car.lng, car.lat));
        marker.setRotation(car.direction); // 设置标记点的方向
        this.map.addOverlay(marker);
        this.markers.push(marker);
      });
    },
    // 添加轨迹线
    addPaths() {
      this.cars.forEach(car => {
        const path = new window.BMap.Polyline([], {
          strokeColor: '#FF0000',
          strokeWeight: 3,
          strokeOpacity: 0.5
        });
        this.map.addOverlay(path);
        this.paths.push(path);
      });
    },
    // 开始动画
    startAnimation() {
      const interval = setInterval(() => {
        let isAllDone = true;
        this.cars.forEach((car, index) => {
          // 计算新的经纬度
          const { lng, lat } = this.getNewLngLat(car);
          car.lng = lng;
          car.lat = lat;

          // 更新标记点和轨迹线
          const point = new window.BMap.Point(lng, lat);
          const marker = this.markers[index];
          marker.setRotation(car.direction);
          marker.setPosition(point);
          const path = this.paths[index];
          path.getPath().push(point);

          // 判断是否到达终点
          if (!this.isArrived(point)) {
            isAllDone = false;
          }
        });

        // 如果所有车辆都到达终点，停止动画
        if (isAllDone) {
          clearInterval(interval);
        }
      }, 1000);
    },
    // 计算新的经纬度
    getNewLngLat(car) {
      const { lng, lat, speed, direction } = car;
      const distance = speed * 1000 / 3600; // 单位：米
      const radian = direction * Math.PI / 180;
      const deltaLng = distance * Math.sin(radian);
      const deltaLat = distance * Math.cos(radian);
      return {
        lng: lng + deltaLng,
        lat: lat + deltaLat
      };
    },
    // 判断是否到达终点
    isArrived(point) {
      // TODO: 根据实际情况修改判断条件
      return false;
    }
  }
}
</script>

<style>
#map {
  width: 100%;
  height: 100%;
}
</style>

以上代码使用百度地图 API，需要先在页面中引入相关的 JS 文件。在 `cars` 数组中定义了几辆汽车的信息，包括经纬度、速度和方向等。在 `addMarkers` 方法中添加标记点，在 `addPaths` 方法中添加轨迹线。在 `startAnimation` 方法中启动动画，每隔一秒钟计算汽车的新的经纬度，并更新标记点和轨迹线。在 `isArrived` 方法中判断汽车是否到达终点，如果到达则停止动画。注意：这只是一个简单的示例代码，实际应用中需要根据情况进行修改。