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

最新推荐文章于 2025-05-21 08:30:00 发布

小张不会撸码

最新推荐文章于 2025-05-21 08:30:00 发布

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue vue使用百度地图绘制地图文章标签： vue js 百度

本文链接：https://blog.youkuaiyun.com/null1126/article/details/106567417

本文介绍如何在Vue项目中利用百度地图API实现多边形和圆形的绘制，适用于配送范围显示等场景。文章包含一个可以直接使用的组件，并提供了效果图。作者鼓励读者在有需求或疑问时留言交流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<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=