vue使用Baidu Map(百度地图)插件开发相关问题------自定义覆盖区域,检索周边地点位置(末尾描述覆盖区出现空隙空白问题)

本文介绍了在使用VueBaiduMap插件时遇到的覆盖区域显示空白的问题,并通过调整坐标数据顺序成功解决。示例代码展示了如何创建自定义覆盖多边形,并结合局部搜索功能实现检索周边地点。问题的关键在于正确设置和理解坐标点的顺序以避免渲染异常。
摘要由CSDN通过智能技术生成

Vue Baidu Map插件的官方文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/search/local-search 快速进入

举例样式:自定义覆盖区域,检索周边地点位置
在这里插入图片描述
覆盖类型的地图:(使用文档内的多边形
代码参考:

<div class="mapBox">
        <div class="search-input">
          <el-input
            v-model="business_keyword"
            placeholder="请搜索企业关键字"
            @keypress.native.enter="businessSearch"
          >
            <template slot="append">
              <div @click="businessSearch"><img
                  src="../../../images/common/icon_search.png"
                  alt=""
                  srcset=""
                ></div>
            </template>
          </el-input>
        </div>
        <baidu-map
          :style="{width:map.width,height:map.height}"
          class="map"
          :map-click="false"
          :zoom="map.zoom"
          :center="{lng: map.center.lng, lat: map.center.lat}"
          :scroll-wheel-zoom="false"
        >
          <!--比例尺控件-->
          <bm-scale anchor="BMAP_ANCHOR_TOP_LEFT" />
          <!--缩放控件-->
          <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_LEFT" />
          <!-- 搜索 -->
          <bm-local-search
            :auto-viewport="true"
            :keyword="business_keyword"
          ></bm-local-search>
          <!-- 覆盖多边形配置 -->
          <bm-polygon
            :path="towerLines"
            stroke-color="#511730"
            fillColor="blue"
            :fillOpacity="0.3"
            :stroke-opacity="0.4"
            :stroke-weight="1"
            :editing="false"
            @lineupdate="updatePolygonPath"
          />

        </baidu-map>
      </div>

具体下载引入查看官方文档

===2021-6-10=
上述图中覆盖区域出现中间空白问题,开始我以为是vue Baidu Map 和原生百度地图不一样的渲染机制,也是后来拿数据试出来的,正确的样式应该是下面这样
在这里插入图片描述
它就是坐标数据的顺序问题,不要再纠结了,快点改数据。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值