如何在 map 上添加标记点？

推荐答案

在微信小程序中，可以通过 map 组件的 markers 属性来添加标记点。以下是一个示例代码：

// www.javascriptcn.com code example
Page({
  data: {
    markers: [{
      id: 1,
      latitude: 39.90469,
      longitude: 116.40717,
      name: '北京市',
      iconPath: '/images/marker.png',
      width: 30,
      height: 30
    }]
  }
})

在对应的 WXML 文件中，使用 map 组件并绑定 markers 属性：

<map
  id="map"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  style="width: 100%; height: 300px;">
</map>

本题详细解读

1. markers 属性

markers 是一个数组，数组中的每个元素代表一个标记点。每个标记点可以包含以下属性：

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

2. map 组件

map 组件用于在小程序中显示地图。通过设置 latitude 和 longitude 属性，可以指定地图的中心点。markers 属性用于在地图上显示标记点。

3. 示例代码解析

• 在 Page 的 data 中定义了一个 markers 数组，数组中包含一个标记点对象。
• 该标记点的 latitude 和 longitude 分别设置为北京的经纬度。
• iconPath 指定了标记点的图标路径，width 和 height 设置了图标的尺寸。
• 在 WXML 文件中，使用 map 组件并绑定 markers 属性，将标记点显示在地图上。

通过这种方式，可以在微信小程序的地图上添加自定义的标记点。