vue2+高德地图实现区域采点功能

前言

最近业务中遇到一个需求，要把一些小区的边界画在地图上，而客户是没有坐标提供的，那么就只能自己在地图上将小区边界画出来。这里使用的是高德地图，并没有找到相关的可以直接画边界的功能，所以这里采用 绘制覆盖物 + 覆盖物编辑 来实现效果。

效果可参考线上地址

步骤

这里大概解释一下步骤，查看详细代码可以直接跳过

1. 创建vue2项目，添加 JSAPI Loader 依赖
2. 初始化地图
3. 添加 鼠标工具-绘制覆盖物
4. 添加 多边形编辑器
5. 添加 右键菜单
6. 添加 关键字搜索 (非必须)

详细代码

<template>
  <div id="app">
    <div class="container">
      <!-- 地图-底层 -->
      <div id="amap" style="width: 100%; height: 100%;"></div>
      <div class="search">
        <el-input v-model="keywords" placeholder="请输入关键词"></el-input>
        <el-button type="primary" style="margin-left: 10px;" @click="onSearch">搜索</el-button>
      </div>
      <div id="panel"></div>
      <div class="input-card">
        <div class="input-item" @change="drawOverlay(selectStatus)">
          <input type="radio" name='func' value='polyline' v-model="selectStatus"><span class="input-text">画折线</span>
          <input type="radio" name='func' value='polygon' v-model="selectStatus"><span class="input-text" style='width:5rem;'>画多边形</span>
        </div>
      </div>
    </div>

    <el-dialog title="保存区划" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form">
        <el-form-item label="小区名称" label-width="120px">
          <el-select v-model="form.xqbh" placeholder="请选择小区">
            <el-option :label="item.name" :value="item.value" v-for="item in xqList" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
    getXq, saveLnglat } from '@/apis'
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
   
  name: 'App',
  data() {