vue +高德地图绘制围栏

不是王哈哈呀

已于 2022-08-23 10:43:34 修改

阅读量1k

点赞数

文章标签： vue.js javascript

于 2022-08-17 09:49:27 首次发布

本文链接：https://blog.csdn.net/m0_61801872/article/details/126379145

版权

简易版绘制围栏

<template>
  <div class="amapContainer_con">
    <button type="primary" @click="drawArea">绘制多边形区域</button>
    <button type="primary" @click="removeArea">清空区域</button>
    <button type="primary" @click="onSubmit">确定</button>
    <div id="container"></div>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
   
  name: 'stateMap',
  data() {
   
    return {
   
      // 选择器
      map: null,
      path: [], // 当前绘制的多边形经纬度数组
      polygonItem: [], // 地图上绘制的所有多边形对象
      bouncedShow: {
   
        isShow: true,
      },

      packUpShow: false,
      // 表格显示
      polygons: '',
      webList: [], // ws实例
      polygoneee: null,
    }
  },
  mounted() {
   
    this.initMap()
  },
  destroyed() {
   
    // 离开路由之后断开websocket连接
    this.map.destroy()
  },
  methods: {
   
    // 初始化地图
    initMap() {
   
      window._AMapSecurityConfig = {
   
        securityJsCode: 'xxx',
      }
      AMapLoader.load({
   
        //首次调用 load
        key: 'xxx', //首次load key为必填
        version: '1.4.15',
        plugins: [
          'AMap.PolyEditor',
          'AMap.ToolBar',
          'AMap.MouseTool',
          'AMap.ControlBar',
          'AMap.Scale',
          'AMap.serviceNames',
          'AMap.Autocomplete&