分享一下我的基于vue的百度地图围栏管理源码实现

之前，公司需要我来开发项目中的围栏管理功能。业务需求也不是太难，就是实现在百度地图上使用百度地图工具来绘制一块区域，给该区域添加项目相关的区域信息，然后保存到数据库，另外实现对保存到数据库的围栏的增删改查功能。
因为公司的项目是一个基于vue的前后端分离的项目。所以开发这一功能时，我一开始想到尝试网上有没有关于百度地图的插件可以使用的。我找到了
vue-baidu-map 这一插件。由于没有太多时间来了解这一插件，便pass了。但是开发者们可以去了解一下。
使用百度地图插件的案例 ： https://www.cnblogs.com/WorkingBoy/p/15424905.html 可以点击看看这位博主的案例。

为了学习百度地图引入vue项目，我选择了最原始的方法，通过手动js引入。
下面是js代码 ： 可以命名为 bmpjl.js。

const ak = '你的密钥' // 百度的地图密钥
/**
 * 异步加载百度地图
 * @returns {Promise}
 * @constructor
 */
function loadBaiDuMap() {
   
  return new Promise(function (resolve, reject) {
   
    try {
   
      console.log('BMap is defined:', BMapGL === undefined || BMapGL)
      resolve(BMapGL)
    } catch (err) {
   
      window.init = function () {
   
        resolve(BMapGL)
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${
     ak}&callback=init`
      script.onerror = reject
      document.body.appendChild(script)
    }
  })
}
export {
    loadBaiDuMap }
/**
 * 异步加载百度地图,以及绘制工具
 * @returns {Promise}
 * @constructor
 */
function loadBaiDuDrawMap() {
   
  return loadBaiDuMap().then(BMapGL => {
   
    let loaded = false
    try {
   
      loaded = (BMapGLLib && BMapGLLib.DrawingManager)
    } catch (err) {
   
      loaded = false
    }
    if (!loaded) {
   
      console.log('BMapLib.DrawingManager loading!')
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js'
      document.body.appendChild(script)
      let link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = 'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css'
      document.body.appendChild(link)
    } else {
   
      console.log('BMapLib.DrawingManager is loaded!')
    }
    return BMapGL
  })
}
export {
    loadBaiDuDrawMap }

引入百度地图前，你需要去网上搜索百度地图官方文档 ，即 百度地图开发者平台 链接地址是 https://www.baidu.com/link?url=hY2nl1O5PMifStkUFQsDmEbycTTly1JfAarPlyzFc7ICq-Mn4oWR8JWsQp0Wy3dL&wd=&eqid=f47ede5a0003ee7600000006629185d0

进入官网后，选择控制台菜单 -> 应用管理 -> 我的应用 .

点击创建应用 输入应用名称 选择安排ap[服务等，提交即可获得一个自己的密钥。
开发者们也可以通过官方开发文档一步步学习，来创建自己的地图。文档里面除了 js方向，还有小程序，android方向等开发文档。

下面是在页面中引入之前的js文件，展示地图以及围栏管理功能的源码：这里我命名为weilan.vue。

<template>
  <div class="home" style="width: 100%; height: 100%">
    <!-- BMapGLLib 控件，这里自己去优化一下吧，写成循环吧 ，，懒得写了 -->
    <!-- <ul class="drawing-panel">
      <li class="bmap-btn bmap-marker" @click="draw('marker')" :style="{ 'background-position-y': actNav === 'marker' ? '-52px' : '0px'}"></li>
      <li class="bmap-btn bmap-polyline" @click="draw('polyline')" :style="{ 'background-position-y': actNav === 'polyline' ? '-52px' : '0px' }"></li>
      <li class="bmap-btn bmap-rectangle" @click="draw('rectangle')" :style="{ 'background-position-y': actNav === 'rectangle' ? '-52px' : '0px' }"></li>
      <li class="bmap-btn bmap-polygon" @click="draw('polygon')" :style="{'background-position-y': actNav === 'polygon' ? '-52px' : '0px'}"></li>
      <li class="bmap-btn bmap-circle" @click="draw('circle')" :style="{'background-position-y': actNav === 'circle' ? '-52px' : '0px'}"></li>
    </ul> -->
    <div class="search">
      <a-input
        v-model="queryParams.unitname"
        maxlength="250"
        :allowClear="true"
        style="width: 60%"
        placeholder="请输入单位名称"
      ></a-input>
      <a-button
        style="width: 30px; margin-left: 20px"
        type="primary"
        shape="circle"
        icon="search"
        @click="search()"
      />
    </div>
    <ul class="drawing-panel">
      <li :key="item.id" v-for="item in mapToolbar">
        <a href="javascript:;">
          <my-icon
            :type="item.icon"
            class="tool-icon"
            @click="item.action === 'polygon' ? draw(item.action) : ''"
          ></my-icon>
        </a>
      </li>
      <!-- <li>
        <a href="javascript:;"><my-icon type="icon-sousuo" class="tool-icon" @click="search"></my-icon></a>
      </li> -->
    </ul>

    <!-- 地图容器 -->
    <div id="container" class="mymap" @ready="handler"></div>

    <div id="r-result" class="minput">
      <label for="">请输入:</label>
      <a-input
        id="suggestCity"
        v-model="address"
        maxlength="250"
        :allowClear="true"
        style="width: 60%; margin-left: 20px"
        placeholder="请输入你想搜索的地点"
      />
    </div>
    <div
      id="searchResultPanel"
      style="
        border: 1px solid #c0c0c0;
        width: 150px;
        height: auto;
        display: none;
      "
    ></div>

    <!-- 新增覆盖物 -->
    <add-overlay
      ref="addoverlay"
      @addoverlay="addLocalOverlay"
      @canceloverlay="cancelOverlay"
    ></add-overlay>
  </div>
</template>

<script>
import {
    i, log } from "mathjs";
// 引入异步引入地图的方法
import {
    loadBaiDuDrawMap } from "./bmpgl";
import AddOverlay from "./Modals/AddOverlay.vue";
//围栏管理后台接口
import {
    sysAreaApi as Sapi } from "@/api";
//地图工具栏
const mapToolbar = [
  {
   
    id: 0,
    title: "正方形",
    icon: "icon-checkbox",
    action: "rectangle",
  },
  {
   
    id: 1,
    title: "多边形",
    icon: "icon-duobianxing",
    action: "polygon",
  },
  {
   
    id: 2,
    title: "圆圈",
    icon: "icon-big-circle",
    action: "circle",
  },
];
export default {
   
  name: "mapCom",
  components: {
   
    AddOverlay,
  },
  data() {
   
    return {
   
      map: null,
      actNav: "",
      myValue: "",
      mapToolbar,
      //绘制对象
      _drawingManager: null,
      //页面存储覆盖物的数组
      overlays: [],
      //查询地点