uniapp map实现打点和点击弹窗功能

要在uniapp中实现地图打点和点击弹窗功能，可以使用uni-app官方提供的uni-ui组件库中的u-map组件来实现。

以下是实现步骤：

1. 引入u-map组件

在需要使用地图的页面中，引入u-map组件：

<template>
  <view>
    <u-map :key="mapKey" :markers="markers" @markertap="onMarkerTap"></u-map>
  </view>
</template>

<script>
import uMap from '@/uni-ui/u-map/u-map.vue'

export default {
  components: {
    uMap
  },
  data() {
    return {
      mapKey: 'your map key',
      markers: [
        {
          id: 1,
          latitude: 39.90469,
          longitude: 116.40717,
          title: '北京市',
          iconPath: '/static/img/marker.png',
          width: 30,
          height: 30
        }
      ]
    }
  },
  methods: {
    onMarkerTap(marker) {
      uni.showToast({
        title: marker.title,
        icon: 'none'
      })
    }
  }
}
</script>

在上述代码中，我们引入了u-map组件，并在data中定义了一个mapKey属性和一个markers属性。其中，mapKey是你申请的地图key，markers是地图上的标记点数组。

2. 配置地图key

在uniapp的manifest.json文件中，配置地图key：

{
  "app-plus": {
    "modules": {
      "map": {
        "apiKey": "your map key"
      }
    }
  }
}

3. 配置标记点

在markers数组中，我们配置了一个标记点，包括id、latitude、longitude、title、iconPath、width和height等属性。其中，latitude和longitude表示标记点的经纬度，title表示标记点的标题，iconPath表示标记点的图标路径，width和height表示标记点的宽度和高度。

4. 点击弹窗

我们在u-map组件上监听markertap事件，当用户点击标记点时，会触发该事件并传入被点击的标记点对象。我们可以在该事件中弹出一个提示框，显示标记点的标题。

在onMarkerTap方法中，我们使用uni.showToast方法弹出一个提示框，显示标记点的标题。

至此，我们就实现了在uniapp中使用u-map组件实现地图打点和点击弹窗功能。