uniapp地图组件拖拽生成圆形区域，返回中心点和半径，适配微信小程序

Question

uniapp地图组件拖拽生成圆形区域，返回中心点和半径，适配微信小程序

Answer 1

有用的话，请采纳哇，这对我很重要！！！

<template>
  <div class="map">
    <map :scale="scale" :markers="markers" @tap="onTap" @regionchange="onRegionChange"></map>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        scale: 16, // 地图缩放级别
        markers: [], // 地图标记
        centerLatitude: '', // 圆心纬度
        centerLongitude: '', // 圆心经度
        radius: '', // 圆半径
        circleMarker: null // 圆形标记
      }
    },
    methods: {
      onTap(event) {
        // 生成圆形标记
        this.generateCircle(event)
      },
      onRegionChange(event) {
        // 拖拽地图时更新圆形标记
        this.updateCircle(event)
      },
      generateCircle(event) {
        // 获取点击位置的经纬度
        const latitude = event.detail.latitude
        const longitude = event.detail.longitude

        // 设置圆心坐标
        this.centerLatitude = latitude
        this.centerLongitude = longitude

        // 创建圆形标记
        const circleMarker = {
          id: 1,
          latitude: latitude,
          longitude: longitude,
          iconPath: '/static/images/circle.png', // 圆形图标路径
          width: 30,
          height: 30
        }
        this.circleMarker = circleMarker

        // 添加圆形标记
        const markers = [...this.markers, circleMarker]
        this.markers = markers
      },
      updateCircle(event) {
        // 获取拖拽后的地图中心坐标
        const latitude = event.detail.latitude
        const longitude = event.detail.longitude

        // 计算圆半径
        const radius = this.calculateRadius()

        // 更新圆形标记
        const circleMarker = {
          ...this.circleMarker,
          latitude: latitude,
          longitude: longitude,
          width: radius * 2,
          height: radius * 2
        }
        this.circleMarker = circleMarker

        // 更新圆半径
        this.radius = radius
      },
      calculateRadius() {
        // 计算圆半径
        const pixelRatio = uni.getSystemInfoSync().pixelRatio // 设备像素比
        const mapWidth = uni.getSystemInfoSync().windowWidth * pixelRatio // 地图宽度
        const circleWidth = this.circleMarker.width // 圆形图标宽度
        const ratio = circleWidth / mapWidth
        const radius = (1 / ratio) / 2
        return radius
      }
    }
  }
</script>

<style>
  .map {
    width: 100%;
    height: 100%;
  }
</style>