Vue项目使用百度地图展示或搜索地点(vue-baidu-map)

Vue项目使用百度地图展示或搜索地点(vue-baidu-map)

1. 安装插件：yarn add vue-baidu-map

2. 在main.js全局中引入:

   import BaiduMap from 'vue-baidu-map'
   Vue.use(BaiduMap, {
     ak: 'your_app_key' // 百度地图秘钥
   })
   

3. 使用
   3.1 在地图上展示标注地点
   百度地图坐标拾取工具

   <div class="m-map-container">
       <div class="m-map">
           <baidu-map
               class="bmView"
               :scroll-wheel-zoom="false" // 禁止鼠标滚轮缩放
   			:dragging="false" // 禁止拖拽
   			:double-click-zoom="false" // 禁止鼠标双击缩放
               :map-click="false" // 禁用鼠标点击查看详情
               :center="location"
               :zoom="zoom">
               <bm-marker :position="location" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
               <bm-view style="width: 100%; height: 480px; flex: 1;border-radius: 5px;"></bm-view>
           </baidu-map>
       </div>
   </div>
   data () {
       return {
           location: {
               lng: 102.68906,
               lat: 25.049784
           }, // 指定地点的经纬度
           zoom: 20 // 地图缩放比例
       }
   }
   .m-map-container {
     width: 1200px;
     text-align: center;
     margin: 0 auto;
     background: #fff;
     .m-map {
       margin: 0 auto;
       width: 800px;
       padding-top: 60px;
     }
   }
   // 移除左下角百度地图版权
   /deep/ div.BMap_cpyCtrl.BMap_noprint.anchorBL {
     display: none;
   }
   // 移除左下角百度地图logo
   /deep/ div.anchorBL {
     display: none;
   }
   // 悬浮地图时不展示小手
   /deep/ .BMap_mask {
     cursor: default;
   }
   

   3.2 在地图上搜索地点，并可通过鼠标点击获取其经纬度及详细地址信息

   <template>
     <a-modal
       title="地址坐标"
       :width="980"
       :visible="visible"
       :confirmLoading="confirmLoading"
       @cancel="handleCancel"
       :footer="null"
     >
       <a-spin :spinning="confirmLoading">
         <a-form :form="form">
           <a-row :gutter="16">
             <a-col :lg="12" :md="12">
               <a-form-item>
                 <a-input-search
                   placeholder="请输入地址"
                   enter-button="查询"
                   @search="handleSearch"
                   v-decorator="['address',{initialValue: defaultAddress}]"
                 />
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12">
               <a-form-item label="坐标" :labelCol="labelCol" :wrapper-col="wrapperCol">
                 <a-input
                   v-decorator="['address_coordinates']"/>
               </a-form-item>
             </a-col>
           </a-row>
           <div class="map">
             <!-- 地图点击事件getLocationPoint，获取地点详细信息、经纬度 -->
             <!-- scroll-wheel-zoom：是否可以用鼠标滚轮控制地图缩放，zoom：视图比例 -->
             <!-- dragging：是否可以用鼠标进行拖拽 -->
             <!-- double-click-zoom：是否可以用鼠标双击控制地图缩放 -->
             <!-- map-click：是否可以用鼠标点击查看详情 -->
             <baidu-map
               class="bmView"
               :scroll-wheel-zoom="true"
               :zoom="zoom"
               @click="getLocationPoint"
             >
               <!-- 右上角比例尺控件 -->
               <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
               <!-- 右上角缩放控件 -->
               <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
               <!-- 左上角地图类型控件 -->
               <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
               <!-- 右下角缩略图 -->
               <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
               <!-- 右下角加入定位控件 -->
               <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
               <!-- 左上角加入城市列表 -->
               <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
               <!-- 右上角加入全景控件 -->
               <!-- <bm-panorama anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-panorama> -->
               <bm-view class="u-bm-view"></bm-view>
               <bm-local-search :keyword="addressKeyword" :auto-viewport="true" class="u-search"></bm-local-search>
             </baidu-map>
           </div>
           <span class="m-span">
             <a-form-item style="margin-top: 20px;margin-bottom: 10px;">
               <a-button class="u-submit" type="primary" htmlType="submit" @click="handleSubmit">确定</a-button>
               <a-button class="u-cancal" @click="handleCancel">取消</a-button>
             </a-form-item>
           </span>
         </a-form>
       </a-spin>
     </a-modal>
   </template>
   <script>
   export default {
     data () {
       return {
         labelCol: {
           lg: { span: 4 },
           md: { span: 4 }
         },
         wrapperCol: {
           lg: { span: 20 },
           md: { span: 20 }
         },
         form: this.$form.createForm(this),
         addParams: {
           mod: 'add'
         },
         defaultAddress: '',
         visible: false,
         confirmLoading: false,
         zoom: 12,
         addressKeyword: ''
       }
     },
     methods: {
       getLocationPoint (e) {
         console.log('e:', e)
         console.log(e.point.lng + ',' + e.point.lat)
         /*
   	    可以通过在.eslintrc.js中加入：
   	    globals: {
   	        BMap: true
   	    }, // 防止eslint报错：'BMap' is not defined.
   	    或者直接使用：// eslint-disable-next-line no-undef
         */
         const geoCoder = new BMap.Geocoder() // 创建地址解析器的实例
         /* 利用坐标获取地址的详细信息 */
         geoCoder.getLocation(e.point, res => {
           console.log('res:', res)
           this.form.setFieldsValue({
             // 地址和经纬度
             address: res.address,
             address_coordinates: res.point.lng + ',' + res.point.lat
           })
         })
       },
       handleSearch (value) {
         console.log(value)
         this.addressKeyword = value
       },
       check (value) {
         if (!this.defaultAddress) {
           this.defaultAddress = value
         } else {
           this.form.setFieldsValue({
             address: value
           })
         }
         this.addressKeyword = value
         this.visible = true
       },
       handleSubmit (e) {
         e.preventDefault()
         const { form: { validateFields } } = this
         this.confirmLoading = true
         validateFields((errors, values) => {
           if (!errors) {
             this.visible = false
             this.confirmLoading = false
             console.log('values:', values)
             this.$emit('ok', values)
           } else {
             this.confirmLoading = false
           }
         })
       },
       handleCancel () {
         this.visible = false
       }
     }
   }
   </script>
   <style lang="less" scoped>
   // 移除左下角百度地图版权
   /deep/ div.BMap_cpyCtrl.BMap_noprint.anchorBL{
     display: none;
   }
   // 移除左下角百度地图logo
   /deep/ div.anchorBL{
     display: none;
   }
   .u-bm-view{
      width: 100%;
      height: 500px;
      flex: 1;
   }
   .m-span{
     text-align: center;
   }
   .u-submit{
     margin-right: 30px;
     width: 100px;
   }
   .u-cancal{
     margin-left: 30px;
     width: 100px;
   }
   /deep/ .BMap_CityListCtrl{
     margin-top: 30px;
     div div {
       .city_content_top{
         height: 36px;
         .cur_city_info{
           position: absolute;
           bottom: 0px;
           height: 24px;
         }
         #city_ctrl_form{
           .sel_city_input{
             height: 24px;
           }
         }
       }
     }
   }
   .u-search{
     display:none;
   }
   </style>
   

原文连接：https://blog.youkuaiyun.com/Dandrose/article/details/112623864