vue 使用百度地图使用vue-baidu-map

最新推荐文章于 2025-06-16 10:22:37 发布

原创

最新推荐文章于 2025-06-16 10:22:37 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍如何在Vue项目中使用vue-baidu-map库。首先通过git获取资源，然后探讨两种自定义地图组件的方法：一是按需引入，但可能遇到堆栈溢出错误；二是全局引入，更稳定。组件允许用户拖动标记获取坐标和地址，或搜索地址传递给父组件。

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

安装

git地址
https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting

$ npm install vue-baidu-map --save

自定义地图组件

需求

用户拖动红色标记点可以获得定位的点和地址，也可以通过搜索获得想要的地址，传给父组件

方案一

所有组件按需引入，但是发现有时候会报错误：Maximum call stack size exceeded，还是选择方案二（全局引入）

创建子组件

<template>
  <div class="baidu-map">
    <div class="container" id="container">
      <!--查询结果-->
      <h3>
        <p>定位地址为：{
  
  {location}}({
  
  {map.center.lng}},{
  
  {map.center.lat}})</p>
      </h3>
      <!-- 这里放地图 -->
      <div class="map-context">
        <baidu-map
          class="map-box"
          ak="your key"
          :center="{lng: map.center.lng, lat: map.center.lat}"
          :scroll-wheel-zoom="true"
          @click="getClickInfo"
          @ready="handler"
        >
          <bm-view class="map-view"></bm-view>
          <div class="map-search">
            <!--自定义搜索框-->
            <div class="search-content">
              <a-input v-model="keyword" placeholder="输入地址进行搜索" style="width: 500px" />
            </div>
            <!--搜索控件-->
            <bm-local-search
              class="map-search-list"
              :keyword="keyword"
              :auto-viewport="true"
              :location="location"
              @infohtmlset="infohtmlset"
            ></bm-local-search>
          </div>
          <!-- 定位 -->
          <!-- <bm-geolocation
            anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
            :showAddressBar="true"
            :autoLocation="true"
            @locationSuccess="locationSuccess"
            @locationError="locationError"
          ></bm-geolocation>-->
          <!--动态添加的点坐标-->
          <bm-marker-clusterer :averageCenter="true">
            <bm-marker
              :key="local"
              :position="{lng: center.lng, lat: center.lat}"
              :dragging="true"
              @dragend="dragend"
            ></bm-marker>
          </bm-marker-clusterer>
          <!--缩放控件-->
          <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
        </baidu-map>
      </div>
    </div>
  </div>
</template>

<script>
//百度地图
import BmView from 'vue-baidu-map/components/map/MapView'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch'
import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmScale f