uniapp map打点 点击打点在打点位置弹窗

您可以使用uniapp内置的地图组件，通过监听地图点击事件来实现打点和弹窗功能。

首先，在`<template>`中添加地图组件：

<template>
  <view>
    <uni-mpvue-map :longitude="longitude" :latitude="latitude" @tap="onMapTap">
      <uni-mpvue-map-marker v-for="(marker, index) in markers" :id="index" :longitude="marker.longitude" :latitude="marker.latitude" :title="marker.title" :iconPath="marker.iconPath" :label="marker.label" @tap="onMarkerTap"></uni-mpvue-map-marker>
    </uni-mpvue-map>
  </view>
</template>

其中，`longitude`和`latitude`为当前地图的中心点坐标。`markers`为已经打好的点的数组，`iconPath`为点的图标路径，`label`为点的标签。

然后，在`<script>`中添加以下代码：

export default {
  data() {
    return {
      longitude: 116.397389,
      latitude: 39.908860,
      markers: [
        {
          longitude: 116.397389,
          latitude: 39.908860,
          title: '点1',
          iconPath: '/static/marker.png',
          label: {
            content: '标签1',
            color: '#ffffff',
            fontSize: 12,
            bgColor: '#000000',
            borderRadius: 3,
            padding: 5,
            textAlign: 'center'
          }
        },
        {
          longitude: 116.407389,
          latitude: 39.908860,
          title: '点2',
          iconPath: '/static/marker.png',
          label: {
            content: '标签2',
            color: '#ffffff',
            fontSize: 12,
            bgColor: '#000000',
            borderRadius: 3,
            padding: 5,
            textAlign: 'center'
          }
        }
      ]
    }
  },
  methods: {
    onMapTap(e) {
      const { longitude, latitude } = e.mp.detail
      this.markers.push({
        longitude,
        latitude,
        title: '新点',
        iconPath: '/static/marker.png',
        label: {
          content: '新标签',
          color: '#ffffff',
          fontSize: 12,
          bgColor: '#000000',
          borderRadius: 3,
          padding: 5,
          textAlign: 'center'
        }
      })
    },
    onMarkerTap(e) {
      const { markerId } = e.mp.detail
      const marker = this.markers[markerId]
      uni.showModal({
        title: marker.title,
        content: `经度：${marker.longitude}，纬度：${marker.latitude}`,
        showCancel: false
      })
    }
  }
}

在`onMapTap`函数中，通过`e.mp.detail`获取到点击的位置的经纬度，然后将该点信息添加到`markers`数组中，实现打点功能。

在`onMarkerTap`函数中，通过`e.mp.detail`获取到点击的点的`markerId`，然后根据`markerId`获取该点的信息，弹出该点的标题和经纬度的弹窗。

以上就是uniapp中使用地图组件打点并弹窗的实现方法。