marker uni,Understanding the Uni-Marker in Uni-App Development

<template>  <map style="width: 100%; height: 240px;" :latitude="params.lat" :longitude="params.lon" :markers="covers" /></template><script lang="ts" setup>// 鍦板浘鏍囪鐐归厤缃甛nconst covers = reactive([  {    id: 1,    iconPath: '../../static/image/map-store-red.svg',    latitude: 0,    longitude: 0,    width: 24,    height: 32  },  {    id: 2,    iconPath: '../../static/image/map-owner-blue.svg',    latitude: 0,    longitude: 0,    width: 24,    height: 32  }]);</script>

In this example, we have defined two markers with unique icons and positions. The `iconPath` property specifies the path to the icon image, while the `latitude` and `longitude` properties define the marker’s location on the map.

Customizing Uni-Markers

Uni-Markers offer a variety of customization options to help you create visually appealing and informative maps. Here are some of the key properties you can use to customize your markers:

By utilizing these properties, you can create markers that are not only visually appealing but also informative and interactive.

Handling Marker Events

Uni-Markers can also be used to trigger events when they are interacted with. For example, you can define a click event to display additional information or perform a specific action. Here’s an example of how you might handle a marker click event:

<template>  <map style="width: 100%; height: 240px;" :latitude="params.lat" :longitude="params.lon" :markers="covers" @markertap="handleMarkerTap" /></template><script lang="ts" setup>// 鍦板浘鏍囪鐐归厤缃甛nconst covers = reactive([  // ... (same as before)]);// 澶勭悊鏍囪鐐瑰嚮浜嬩欢function handleMarkerTap(e) {  console.log('Marker tapped:', e.markerId);  // 鍦ㄦ澶勬墽琛岀浉鍏虫搷浣淺n}</script>

In this example,