uni-app 高德地图标绘 测量地块大小

在处理uni-app中的高德地图标绘与测量地块大小的功能时，你可以利用高德地图的JavaScript API来完成这些任务。以下是一个基本的代码案例，展示如何在uni-app中集成高德地图，并实现绘制多边形并测量其面积的功能。

首先，确保你已经在uni-app项目中引入了高德地图的SDK。你可以通过在manifest.json中添加高德地图的key，或者在页面的<script>标签中直接引入高德地图的JS SDK。

以下是一个示例页面代码：

<template>
  <view>
    <map
      id="map"
      :longitude="longitude"
      :latitude="latitude"
      :scale="scale"
      :markers="markers"
      :polygons="polygons"
      style="width: 100%; height: 100%;"
      @tap="onMapTap"
    ></map>
    <button @click="clearMap">清空地图</button>
    <text>{{ area }} 平方米</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      longitude: 116.397428,
      latitude: 39.90923,
      scale: 15,
      markers: [],
      polygons: [],
      path: [],
      area: 0,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const self = this;
      uni.createMapContext('map', this.$mapCtx = {});
      this.$mapCtx.init({
        key: '你的高德地图Key',
        style: 'dark', // 设置地图的显示样式
      });

      this.$mapCtx.on('tap', (e) => {
        self.addPointToMap(e.detail.latitude, e.detail.longitude);
      });
    },
    addPointToMap(lat, lng) {
      this.path.push([lng, lat]);
      this.polygons = [{
        points: this.path,
        strokeColor: "#FF33FF",
        strokeWidth: 3,
        fillColor: "#1791fc",
        fillOpacity: 0.35
      }];
      this.calculateArea();
    },
    calculateArea() {
      if (this.path.length >= 3) {
        const polygon = new AMap.Polygon({
          path: this.path.map(([lng, lat]) => new AMap.LngLat(lng, lat)),
        });
        AMap.event.addListener(polygon, 'a', (e) => {
          this.area = e.obj.getArea(); // 获取面积，单位为平方米
        });
      }
    },
    clearMap() {
      this.path = [];
      this.polygons = [];
      this.area = 0;
    }
  }
};
</script>

注意：

1. 上述代码示例是基于uni-app的map组件和高德地图的JavaScript API。
2. 在initMap方法中，你需要替换'你的高德地图Key'为你的实际高德地图API Key。
3. 代码中的calculateArea方法利用高德地图的Polygon对象来计算面积，但这里有一个简化的处理，实际上你可能需要在地图完全加载并绘制多边形后触发面积计算。
4. 本示例未处理地图的完整生命周期和错误处理，生产环境中应添加相应的逻辑。