uniapp map组件多边形 深圳

UniApp Map组件中的多边形（Polygon）是一个用于表示地图上封闭区域的数据结构，它允许开发者在地图上绘制自定义形状，并对其进行交互操作。在使用 UniApp 开发深圳地图应用时，你可以按照以下步骤创建一个多边形：

1. 导入依赖：首先，在页面的.vue文件中引入`map`组件和相关的样式，如`uni-map/style.css`。

<template>
  <view class="container">
    <uni-map :center="center" :zoom="zoomLevel" ref="myMap"></uni-map>
  </view>
</template>

<script>
import { uniMap } from '@vant/map'
...
</script>

2. 初始化地图：在`data()`函数中设置初始地图中心点坐标和缩放级别。

export default {
  data() {
    return {
      center: [{ latitude: 22.5431, longitude: 114.0578 }],
      zoomLevel: 12, // 选择合适的初始缩放等级
      polygonPoints: [], // 保存多边形的各个顶点坐标
    }
  },
...

3. 添加多边形：创建一个多边形数组，每个元素包含经纬度坐标，然后设置到`polygonPoints`。

methods: {
  addPolygon() {
    this.polygonPoints = [
      { lat: 22.5464, lng: 114.0659 }, // 点A
      { lat: 22.5431, lng: 114.0578 }, // 点B (已存在)
      { lat: 22.5307, lng: 114.0497 }, // 点C
    ]
    this.$refs.myMap.setPolygon(this.polygonPoints) // 绘制多边形
  }
}

4. 显示多边形：当你需要显示多边形时，调用`setPolygon`方法传入顶点数组。