安装

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

  1. $ npm install vue-baidu-map --save

自定义地图组件

需求

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

方案一

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

创建子组件

  1. <template>
  2.   <div class="baidu-map">
  3.     <div class="container" id="container">
  4.       <!--查询结果-->
  5.       <h3>
  6.         <p>定位地址为：{{location}}({{map.center.lng}},{{map.center.lat}})</p>
  7.       </h3>
  8.       <!-- 这里放地图 -->
  9.       <div class="map-context">
  10.         <baidu-map
  11.           class="map-box"
  12.           ak="your key"
  13.           :center="{lng: map.center.lng, lat: map.center.lat}"
  14.           :scroll-wheel-zoom="true"
  15.           @click="getClickInfo"
  16.           @ready="handler"
  17.         >
  18.           <bm-view class="map-view"></bm-view>
  19.           <div class="map-search">
  20.             <!--自定义搜索框-->
  21.             <div class="search-content">
  22.               <a-input v-model="keyword" placeholder="输入地址进行搜索" style="width: 500px" />
  23.             </div>
  24.             <!--搜索控件-->
  25.             <bm-local-search
  26.               class="map-search-list"
  27.               :keyword="keyword"
  28.               :auto-viewport="true"
  29.               :location="location"
  30.               @infohtmlset="infohtmlset"
  31.             ></bm-local-search>
  32.           </div>
  33.           <!-- 定位 -->
  34.           <!-- <bm-geolocation
  35.             anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
  36.             :showAddressBar="true"
  37.             :autoLocation="true"
  38.             @locationSuccess="locationSuccess"
  39.             @locationError="locationError"
  40.           ></bm-geolocation>-->
  41.           <!--动态添加的点坐标-->
  42.           <bm-marker-clusterer :averageCenter="true">
  43.             <bm-marker
  44.               :key="local"
  45.               :position="{lng: center.lng, lat: center.lat}"
  46.               :dragging="true"
  47.               @dragend="dragend"
  48.             ></bm-marker>
  49.           </bm-marker-clusterer>
  50.           <!--缩放控件-->
  51.           <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
  52.         </baidu-map>
  53.       </div>
  54.     </div>
  55.   </div>
  56. </template>
  58. <script>
  59. //百度地图
  60. import BmView from 'vue-baidu-map/components/map/MapView'
  61. import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch'
  62. import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation'
  63. import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  64. import BmScale from 'vue-baidu-map/components/controls/Scale'
  65. import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
  66. import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
  67. import BmMarker from 'vue-baidu-map/components/overlays/Marker'
  68. import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
  70. export default {
  71.   name: 'baidu-map',
  72.   components: {
  73.     BmView,
  74.     BmLocalSearch,
  75.     BaiduMap,
  76.     BmScale,
  77.     BmNavigation,
  78.     BmMarkerClusterer,
  79.     BmMarker,
  80.     BmInfoWindow,
  81.     BmGeolocation
  82.   },
  83.   props: {
  84.     local: {
  85.       //默认地址
  86.       type: String,
  87.       default: ''
  88.     },
  89.     center: {
  90.       //默认经纬度（中心）
  91.       type: Object,
  92.       default() {
  93.         return {
  94.           lat: 30.051208,
  95.           lng: 120.583321
  96.         }
  97.       }
  98.     }
  99.   },
  100.   watch: {
  101.     local(val) {
  102.       this.keyword = val
  103.     },
  104.     center(val) {
  105.       this.map.center = val
  106.     }
  107.   },
  108.   data() {
  109.     return {
  110.       BMap: {},
  111.       location: '', // 地址
  112.       keyword: '', //搜索关键词
  113.       map: {
  114.         center: { lng: 120.583321, lat: 30.051208 }, //'绍兴市'
  115.         zoom: 12
  116.       }
  117.     }
  118.   },
  119.   methods: {
  120.     /** *
  121.      * 地图点击事件。
  122.      */
  123.     getClickInfo(e) {
  124.       // 调整地图中心位置
  125.       this.center.lng = e.point.lng
  126.       this.center.lat = e.point.lat
  127.       // 此时已经可以获取到BMap类
  128.       if (this.BMap) {
  129.         const that = this
  130.         // Geocoder() 类进行地址解析
  131.         // 创建地址解析器的实例
  132.         const geoCoder = new this.BMap.Geocoder()
  133.         // getLocation() 类--利用坐标获取地址的详细信息
  134.         // getPoint() 类--获取位置对应的坐标
  135.         geoCoder.getLocation(e.point, function(res) {
  136.           console.log('获取经纬度', e.point, '获取详细地址', res)
  137.           that.map.center = e.point
  138.           that.location = res.address
  139.           that.$emit('result', e.point)
  140.         })
  141.       }
  142.     },
  143.     // 初始化
  144.     handler({ BMap, map }) {
  145.       this.BMap = BMap
  146.       this.keyword = this.local
  147.        if (this.BMap) {
  148.         const that = this
  149.         // Geocoder() 类进行地址解析
  150.         // 创建地址解析器的实例
  151.         const geoCoder = new this.BMap.Geocoder()
  152.         // getLocation() 类--利用坐标获取地址的详细信息
  153.         // getPoint() 类--获取位置对应的坐标
  154.         geoCoder.getLocation(that.map.center, function(res) {
  155.           console.log('获取经纬度', that.map.center, '获取详细地址', res)
  156.           that.location = res.address ? res.address : ''
  157.         })
  158.       }
  159.     },
  160.     // 选择搜索的点
  161.     infohtmlset(poi) {
  162.       this.location = poi.title
  163.       this.map.center = poi.point
  164.       this.$emit('result', poi.point)
  165.     },
  166.     // 拖拽标记点出触发事件
  167.     dragend({ type, target }) {
  168.       console.log('拖拽标记点出触发事件', type, target)
  169.       this.map.center = target.point
  170.       this.$emit('result', target.point)
  171.       if (this.BMap) {
  172.         const that = this
  173.         // Geocoder() 类进行地址解析
  174.         // 创建地址解析器的实例
  175.         const geoCoder = new this.BMap.Geocoder()
  176.         // getLocation() 类--利用坐标获取地址的详细信息
  177.         // getPoint() 类--获取位置对应的坐标
  178.         geoCoder.getLocation(target.point, function(res) {
  179.           console.log('获取经纬度', target.point, '获取详细地址', res)
  180.           that.location = res.address
  181.         })
  182.       }
  183.     }
  184.   }
  185. }
  186. </script>
  188. <style lang="less" scoped>
  189. .container {
  190.   margin: 0 auto;
  191.   width: 1366px;
  192.   padding: 0px;
  193.   min-height: 550px;
  194.   .search-content {
  195.     width: 100%;
  196.   }
  197.   .map-context {
  198.     width: 950px;
  199.     display: flex;
  200.     justify-content: space-between;
  201.     position: relative;
  202.     margin-top: 10px;
  203.   }
  204.   .map-view {
  205.     width: 800px;
  206.     height: 550px;
  207.     background: white;
  208.     border-radius: 5px;
  209.     margin-left: 10px;
  210.     position: absolute;
  211.     top: 0;
  212.     right: 0;
  213.     left: 500px;
  214.     .right {
  215.       text-align: left;
  216.     }
  217.     .left {
  218.       width: 100px;
  219.     }
  220.   }
  221.   .map-search {
  222.     position: absolute;
  223.     top: 0;
  224.     left: 0;
  225.   }
  226.   .map-search-list {
  227.     width: 500px;
  228.     height: 490px;
  229.     overflow: scroll;
  230.     margin-top: 5px;
  231.   }
  232. }
  233. </style>

父组件内的使用方法

  1. <template>
  2.   <BaiduMap
  3.      :center="{lat: location.latitude, lng: location.longitude}"
  4.      :local="location.address"
  5.      @result="getLocaltion"
  6.   ></BaiduMap>
  7. </template>
  8. <script>
  9. import BaiduMap from '@/Template/BaiduMap'
  10. export default {
  11.   name: 'Area',
  12.   components: {
  13.     BaiduMap
  14.   },
  15.   data() {
  16.     return {
  17.       location: {
  18.         longitude: null,
  19.         latitude: null,
  20.         address: ''
  21.       }
  22.     }
  23.   },
  24.   methods: {
  25.   /*  获取地图地址 */
  26.     getLocaltion(local) {
  27.       console.log('地图信息', local)
  28.       this.location = {
  29.         latitude: local.location.lat,
  30.         longitude: local.location.lng,
  31.         address: local.location.address
  32.        }
  33.     },
  34.   }
  35. }
  36. </script>

方案二

全局引入

  1. // 百度地图
  2. import BaiduMap from 'vue-baidu-map'
  3. Vue.use(BaiduMap, {
  4.   /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
  5.   ak: 'your key'
  6. })

创建子组件

  1. <template>
  2.   <baidu-map
  3.     @ready="handler"
  4.     :scroll-wheel-zoom="true"
  5.     :center="{lng: center.lng, lat: center.lat}"
  6.     :zoom="zoom"
  7.     @click="getClickInfo"
  8.   >
  9.     <bm-view class="map"></bm-view>
  10.     <bm-control :offset="{width: '10px', height: '10px'}">
  11.       <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}">
  12.         <a-input v-model="keyword" placeholder="请输入地名关键字" class="search-int" @change="changeInt" />
  13.         <bm-local-search
  14.           v-if="isShow"
  15.           class="result-box"
  16.           :keyword="keyword"
  17.           :auto-viewport="true"
  18.           @infohtmlset="infohtmlset"
  19.         ></bm-local-search>
  20.       </bm-auto-complete>
  21.     </bm-control>
  22.     <!-- 缩放比例尺的展示 -->
  23.     <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
  24.     <!-- 添加一个小红点的，并将当前的经纬度写入数据中 -->
  25.     <bm-marker :position="{lng:center.lng, lat: center.lat}"></bm-marker>
  26.   </baidu-map>
  27. </template>
  29. <script>
  30. export default {
  31.   props: {
  32.     local: {
  33.       type: String,
  34.       default: ''
  35.     },
  36.     mapcenter: {
  37.       //默认经纬度（中心）
  38.       type: Object,
  39.       default() {
  40.         return {
  41.           lat: 30.051208,
  42.           lng: 120.583321
  43.         }
  44.       }
  45.     }
  46.   },
  47.   data() {
  48.     return {
  49.       BMap: {},
  50.       isShow: false,
  51.       keyword: '',
  52.       resultList: [],
  53.       containHtml: '',
  54.       zoom: 12,
  55.       center: { lng: 120.583321, lat: 30.051208 }
  56.     }
  57.   },
  58.   watch: {
  59.     local(val) {
  60.       console.log('搜索-----', val)
  61.       this.keyword = val
  62.     },
  63.     mapcenter(val) {
  64.       console.log('center-----', val)
  65.       this.center = val
  66.     }
  67.   },
  68.   mounted(){
  69.     console.log('传递过来的地址',this.local)
  70.     this.keyword = this.local
  71.   },
  72.   methods: {
  73.     // 初始化
  74.     handler: function({ BMap, map }) {
  75.       map.enableScrollWheelZoom(true)
  76.       const _this = this
  77.       const geolocation = new BMap.Geolocation()
  78.       geolocation.getCurrentPosition(
  79.         function(r) {
  80.           _this.center = { lng: r.longitude, lat: r.latitude } // 设置center属性值
  81.         },
  82.         { enableHighAccuracy: true }
  83.       )
  85.       window.map = map
  86.       // 赋值，方便调用，本节被用到
  87.       this.BMap = BMap
  88.     },
  89.     // 输入框输入
  90.     changeInt(){
  91.       this.isShow = true
  92.     },
  93.     //点击获取到当前经纬度
  94.     getClickInfo(e) {
  95.       console.log('点击获取', e)
  96.       const _this = this
  97.       _this.center.lng = e.point.lng
  98.       _this.center.lat = e.point.lat
  99.       const gc = new this.BMap.Geocoder()
  100.       gc.getLocation(e.point, function(rs) {
  101.         console.log('点击获取到当前经纬度', rs)
  103.         _this.$emit('result', rs)
  104.       })
  105.       _this.zoom = e.target.getZoom()
  106.     },
  107.     // 标注气泡内容创建后的回调函数
  108.     infohtmlset(poi) {
  109.       console.log('标注气泡内容创建后的回调函数', poi)
  110.       this.isShow = false
  111.       this.keyword = poi.title + '(' + poi.address + ')'
  112.       this.center = poi.point
  113.       this.$emit('result', poi)
  114.     }
  115.   }
  116. }
  117. </script>
  118. <style lang="less" scoped>
  119. .map {
  120.   width: 100%;
  121.   height: 500px;
  122. }
  123. .search-int {
  124.   width: 100%;
  125.   min-width: 548px;
  126.   height: 40px;
  127.   position: relative;
  128. }
  129. .result-box {
  130.   width: 100%;
  131.   min-width: 548px;
  132.   position: absolute;
  133.   top: 40px;
  134.   left: 0px;
  135. }
  136. </style>

父组件使用方式同方案一