vue-amap 使用高德原生JS API 绘制多边形 polygon

根据填写的经纬度显示成一片区域，那就是高德矢量图形的 api 咯，效果如图所示，为了测试随便写的经纬度，形状有点奇怪，嘻嘻~~~~

多边形  折线  圆形 什么的 都可以。按需看高德api 即可   传送门：https://lbs.amap.com/api/javascript-api/guide/overlays/vector-overlay#polygon

一、首先要有地图丫~ 用了 vue-amap ，它的官网有时候能打开  有时候打不开，看运气吧https://elemefe.github.io/vue-amap/#/zh-cn/base/amap

安装和配置就省略咯，官网都有，自取呦~~

矢量图形是 web 服务 JS API 的，所以申请高德key的时候 要注意，别申请错了

二、在 el-amap 里 用原生 js api 的时候，地图的 amap-manager  尤其重要

   <el-amap
      class="amap-box"
      :zoom="zoom"
      :amap-manager="amapManager"
      :plugin="plugin"
      :center="center"
      ref="map"
      vid="amapDemo"
    >
    </el-amap>

<script>
    import { AMapManager } from "vue-amap";
    let amapManager = new AMapManager(); // 

    export default {
        data() {
            return {
                amapManager,
            }
        },
        methods:{
              // 矢量图形
            geoLan() {
              const map = amapManager.getMap();
                =====>
              let path = [];
              this.geiList.forEach((item) => {
                let arr = [Number(item.glongitude), Number(item.glatitude)];
                path.push(arr);
              });
              this.path = path;
              ///  <======
                // 上面箭头里面的这些是 处理后台返回的经纬度地点,要跟官网例子的形式一样才行
                
              let that = this;
              var polygon = new AMap.Polygon({
                    // 这些就是图形的一些基本样式了，颜色 线条粗细 透明度之类的
                path: that.path,
                strokeColor: "#FF33FF",
                strokeWeight: 3,
                strokeOpacity: 0.5,
                fillOpacity: 0.3,
                fillColor: "#1791fc",
                zIndex: 99999999,
              });
              map.add(polygon);
              // 缩放地图到合适的视野级别
              map.setFitView([polygon]);
    },
        }
    }
</script>

也百度出来不少 el-amap-polygon 这种写法的，但是这种我没有弄出来，所以用这种方法的小可爱们，我帮不上忙啦~~