uniapp map实现打点 点击打点定位弹窗功能

1. 引入地图组件

在 `pages.json` 中引入地图组件，例如：

"usingComponents": {
  "map": "@vant/weapp/mapp",
}

2. 在页面中添加地图组件

在页面中添加 `map` 组件，并设置属性 `show-location` 为 `true`，表示显示当前位置。

<map show-location="{{true}}" />

3. 添加打点

在页面中添加打点，可以使用 `map` 组件的 `markers` 属性。例如：

<map show-location="{{true}}" markers="{{markers}}" />

其中 `markers` 是一个数组，每个数组元素表示一个打点对象，包含以下属性：

- `id`：打点的唯一标识，必须是字符串类型。
- `latitude`：打点的纬度。
- `longitude`：打点的经度。
- `title`：打点的标题。
- `iconPath`：打点的图标路径。
- `width`：打点的宽度。
- `height`：打点的高度。

例如：

markers: [
  {
    id: '1',
    latitude: 30.123456,
    longitude: 120.123456,
    title: '打点1',
    iconPath: '/static/images/marker.png',
    width: 32,
    height: 32,
  },
  {
    id: '2',
    latitude: 30.234567,
    longitude: 120.234567,
    title: '打点2',
    iconPath: '/static/images/marker.png',
    width: 32,
    height: 32,
  },
],

4. 实现点击打点弹窗功能

可以使用 `map` 组件的 `bindmarkertap` 事件来实现点击打点弹窗功能。例如：

<map show-location="{{true}}" markers="{{markers}}" bindmarkertap="onMarkerTap" />

onMarkerTap(event) {
  const markerId = event.markerId;
  const marker = this.data.markers.find(marker => marker.id === markerId);
  wx.showModal({
    title: marker.title,
    content: `纬度：${marker.latitude}，经度：${marker.longitude}`,
  });
},

在 `onMarkerTap` 方法中，通过 `event.markerId` 获取点击的打点的 `id`，然后通过 `this.data.markers.find` 方法找到对应的打点对象。最后使用 `wx.showModal` 方法弹出弹窗，显示打点的标题和经纬度信息。