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`对象来实现。