// 计算两者之间的距离 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 秒钟）。

相关问题

H5怎么自定义uniapp map markers点

在H5页面中使用UniApp地图组件添加自定义标记点（markers），你可以通过创建`Marker`对象并设置其样式、图标以及位置信息。以下是一个简单的步骤指南：

1. 引入所需库：
首先，在你的Vue项目中引入 UniApp 的 `map-view` 组件。

<template>
  <view>
    <map-view :ref="mapRef" :latitude="latitude" :longitude="longitude"></map-view>
  </view>
</template>

2. 创建Marker实例：
在你的组件的script部分，定义一个marker对象，并在数据里初始化它的属性。

<script setup>
import { ref } from 'vue';
import {MapView} from '@dcloudio/uni-app';

const mapRef = ref();
let markerData = {
  lat: 0, // 标记点纬度
  lng: 0, // 标记点经度
  iconPath: './path_to_your_icon.png', // 图标路径
  customOptions: { // 自定义选项，例如点击事件、弹窗内容等
    onMarkerClick: () => console.log('Marker clicked'),
    infoWindowContent: '这是自定义弹窗内容'
  }
};
</script>

3. 添加marker到地图：
使用`setMarkers`方法将marker对象添加到地图上。

<watch>
  async function updateMap() {
    await mapRef.value.setMarkers([{
      position: [markerData.lat, markerData.lng],
      icon: {
        path: markerData.iconPath,
        width: 64,
        height: 64,
        rotate: 0
      },
      options: markerData.customOptions
    }]);
  }
  // 初始化地图时设置marker
  updateMap();
</watch>

4. 更新marker：
当需要更新标记的位置或样式时，可以直接修改`markerData`，然后再次调用`updateMap()`方法。

记得替换`iconPath`为你实际的图片路径，同时可以按需调整自定义选项。如果你有更复杂的自定义需求，比如动态加载图标或使用自定义组件作为标记，也可以通过设置`options`对象来实现。

springboot vue 百度地图api，地图功能：利用百度地图提供的各种模块（如 markers、routes 等），可以实现路线规划、定位、信息窗口等功能。

在Spring Boot和Vue.js的项目中整合百度地图API，要实现地图的功能，可以按以下步骤进行：

1. **路线规划**：
- 使用百度地图的`BMap路线规划`服务，首先需要获取用户起点和终点的位置信息，然后在后台（Spring Boot）调用API，获取路径规划结果。
- 返回路径规划数据给前端，可以在Vue组件里解析并显示在地图上，如`BMap.Polyline`绘制线路。

2. **定位**：
- 使用`BMap.Geolocation`模块，在用户的许可下，可以通过JavaScript发起定位请求。Vue组件中监听`onLocationChange`事件，获取经纬度后更新地图中心点。

   this.map.addEventListener('locationchange', (event) => {
     this.map.centerAndZoom(new BMap.Point(event.point.lng, event.point.lat), 12);
   });

3. **信息窗口**：
- 创建`BMap.InfoWindow`对象，当鼠标悬停在特定标记上，可以弹出信息窗口显示详细内容。

   const marker = new BMap.Marker(point); // point是经纬度对象
   marker.addEventListener('click', () => {
     const infoWindow = new BMap.InfoWindow('这是信息窗口的内容');
     infoWindow.open(map, marker.getPosition());
   });

4. **其他模块**：
- 可以利用`BMap.Marker`表示地点，`BMap.Autocomplete`用于地址搜索输入框，`BMap.LocalSearch`进行本地商家查找等。