uni-app 中如何在 map 上添加标记点？

推荐答案

在 uni-app 中，可以通过 map 组件的 markers 属性来添加标记点。以下是一个简单的示例代码：

-- -------------------- ---- -------
----------
  ------
    ----
      --------------------
      ----------------------
      ------------------
      ------------- ----- ------- --------
    ------
  -------
-----------

--------
------ ------- -
  ------ -
    ------ -
      --------- -------
      ---------- ----------
      -------- -
        -
          --- --
          --------- -------
          ---------- ----------
          ----- ------
          --------- -----------------------
          ------ ---
          ------- --
        -
      -
    --
  -
--
---------

本题详细解读

1. map 组件的基本使用

map 组件是 uni-app 中用于展示地图的组件，支持设置地图的中心点、缩放级别、标记点等功能。通过 latitude 和 longitude 属性可以设置地图的中心点坐标。

2. markers 属性的作用

markers 属性用于在地图上添加标记点。它是一个数组，数组中的每个元素都是一个标记点的配置对象。每个标记点可以设置以下属性：

• id: 标记点的唯一标识符。
• latitude: 标记点的纬度。
• longitude: 标记点的经度。
• name: 标记点的名称。
• iconPath: 标记点的图标路径，可以是本地路径或网络路径。
• width: 标记点图标的宽度。
• height: 标记点图标的高度。

3. 示例代码解析

在示例代码中，我们定义了一个 map 组件，并通过 markers 属性添加了一个标记点。标记点的位置设置为天安门的经纬度，图标使用了本地图片 location.png，并设置了图标的宽度和高度。

4. 注意事项

• markers 属性中的 id 必须是唯一的，否则可能会导致标记点显示异常。
• iconPath 可以是本地路径或网络路径，如果是网络路径，需要确保图片资源可以正常加载。
• map 组件的高度和宽度可以通过 style 属性进行设置，确保地图在页面中正常显示。