Vue中使用百度地图绘制多个多边形

• 因公司项目需要绘制配送范围 之前也没接触过百度地图这一块 自己花了些时间去研究了一下 目前可实现绘制多个圆形、多个多边形

该功能是一个组件 直接放入项目即可

<template>
  <div>
    <div class="map">
      <div class="title">
        <div>
          <img src="@/assets/home/z_x_green_mini.png" alt />
        </div>
        <div>请选定配送范围 <span style="color:red;fontSize:14px;"> (注：最多只能绘制5个配送范围)</span></div>
      </div>
      <div class="container" id="container">
        <baidu-map
          class="bm-view"
          :center="center"
          :zoom="zoom"
          @ready="handler"
          @click="clickEvent"
          :inertial-dragging="true"
          :scroll-wheel-zoom="true"
        >
          <div>
            <bm-polygon
              v-for="(item,i) in polygonPath"
              :key="i"
              :path="item"
              stroke-color="blue"
              :stroke-opacity="0.5"
              :stroke-weight="2"
              :editing="true"
              :clicking="false"
              @lineupdate="updatePolygonPath($event,i)"
            />
          </div>

          <div>
            <bm-geolocation
              anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
              :showAddressBar="true"
              :autoLocation="true"
            ></bm-geolocation>
          </div>

          <div>
            <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
          </div>
        </baidu-map>

        <div class="draw" @click="ploy">绘制多边形</div>
        <!-- <div class="exit" @click=