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

推荐答案

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

// www.javascriptcn.com code example
<template>
  <view>
    <map
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      style="width: 100%; height: 300px;">
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.39742,
      markers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          name: '天安门',
          iconPath: '/static/location.png',
          width: 30,
          height: 30
        }
      ]
    };
  }
};
</script>

本题详细解读

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 属性进行设置，确保地图在页面中正常显示。