微信小程序在地图上添加标记点自定义覆盖物

Question

**微信小程序在地图上添加标记点自定义覆盖物
**
在map组件地图上设置了markers标记点后在标记点旁边添加一个竖版的文本，显示建筑名称。

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

在微信小程序中，使用 map 组件可以在地图上添加标记点（markers），并使用自定义覆盖物（Custom Overlay）来添加竖版文本。下面是一个示例代码：

<map
  id="myMap"
  longitude="121.472841"
  latitude="31.230327"
  scale="14"
  markers="{{ markers }}"
  enable-compass="true"
  enable-zoom="true"
>
  <!-- 自定义覆盖物 -->
  <cover-view
    wx:for="{{ markers }}"
    wx:for-item="marker"
    style="position: absolute; top: {{ marker.latitude }}; left: {{ marker.longitude }}; transform: translate(-50%, -50%);"
  >
    {{ marker.name }}
  </cover-view>
</map>

在上面的代码中，我们使用 wx:for 指令来遍历 markers 数组，并使用 wx:for-item 指令来获取当前遍历的 marker 对象。然后，我们使用 style 属性来设置覆盖物的位置和样式，并使用 {{ }} 语法来显示 marker 对象的 name 属性。

在 JavaScript 代码中，我们可以使用以下代码来设置 markers 数组：

Page({
  data: {
    markers: [
      {
        latitude: 31.230327,
        longitude: 121.472841,
        name: '建筑名称1'
      },
      {
        latitude: 31.230328,
        longitude: 121.472842,
        name: '建筑名称2'
      }
    ]
  }
})

在上面的代码中，我们使用 data 对象来存储 markers 数组，并使用 latitude、longitude 和 name 属性来描述每个标记点。

通过上面的代码，我们可以在地图上添加标记点，并在标记点旁边添加竖版文本，显示建筑名称。