vue引入百度地图案例

使用

项目执行命令 npm i vue-baidu-map --save或者cnpm i vue-baidu-map --save
全局注册（在main.js）

import BaiduMap from 'vue-baidu-map';```
 Vue.use(BaiduMap, {
    /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
    ak: 'YOUR_APP_KEY'
 })

去百度API申请地图密钥（访问应用AK） http://api.map.baidu.com/lbsapi/

在vue组件里面如果就这么使用会报 BMap is not defined ， so...... 新建js文件

//map.js
export function MP(ak) {
    return new Promise(function(resolve, reject) {
      window.onload = function() {
        resolve(BMap)
      }
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.src =
        'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=init'
      script.onerror = reject
      document.head.appendChild(script)
    })
  }

在自己创建的地图组建中进行引入

import { MP } from './../../map.js'
mounted () {
    this.$nextTick(function () {
      var _this = this;
      //写入自己的ak
      MP(_this.ak).then(BMap => {
        //在此调用api
        this.map()//这是我自定义的

      })
    })
  },
  methods：{
     map(){
       
     } 
  }

我把会用到的百度地图的方法罗列一下，方便大家可以快速运用百度地图
var map = new BMap.Map("BaiduMap") ; // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 10); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var point = new BMap.Point(117.333964, 39.9093); // 创建点坐标
var marker = new BMap.Marker(point); //创建标注
map.addOverlay(marker);// 将标注添加到地图中
map.clearOverlays(); //清除地图上所有覆盖物

效果图

实现高亮选取区域以及简单搜索功能；
高亮选取区域：

   data(){
      return{
         districtLoading :0,
         bList : []
     }
   }

    //获取行政区域边界     
    getBoundary(){
       this.addDistrict(this.ruleForm.area)
     },
    //添加行政区域
     addDistrict(districtName){
       let _this = this;
      //使用计数器来控制加载过程
       this.districtLoading ++;//控制加载过程
       var bdary = new BMap.Boundary();
       bdary.get(districtName,function(rs){//获取行政区域
         var count = rs.boundaries.length;//行政区域点的个数
         for(let i =0;i<count;i++){
           _this.bList.push({ points: rs.boundaries[i], name: districtName });
         };
         _this.districtLoading --;//加载完成区域点后计数器-1
         if(_this.districtLoading  == 0){
           _this.drawBoundary()//全加载完成后画端点
         }
       })
     },
     //画边界
     drawBoundary(){
       let _this = this;
       var pointArray = [];//包括所有区域的点数组
       for(let i=0;i<this.bList.length;i++){//循环添加
         var ply = new BMap.Polygon(_this.bList[i].points,{//多边形层及显示
            strokeWeight:2,//边框宽度
            trokeColor: '#0027EB',//边框颜色
            // fillColor:'00ffff'//填充颜色
         }); //建立多边形覆盖物
         ply.name = _this.bList[i].name;
         _this.map.addOverlay(ply);
         //将点增加到视野范围内
         var path = ply.getPath();
         pointArray = pointArray.concat(path);
       }
       this.map.setViewport(pointArray)//调整视野 
     },

然后就是搜索的实现（多条件）
点击查询，拿到搜索条件的value值，过滤坐标数组（无论是接口获取到的还是自己定义的）

//HTML
<template>
  <div class="maps">
    <div class="map-distribute">
        <div class="map-search">
            <p class="title">地址查询</p>
            <a-tabs type="card">
             <a-tab-pane key="1" tab="查询">
              <a-form-model 
                :model="ruleForm" 
                :label-col="{ span: 5}"
                :wrapper-col="{ span: 14 }"
               >
                <a-form-model-item label="单位名称：">
                  <a-input v-model="ruleForm.name" />
                </a-form-model-item>
                <a-form-model-item label="资质等级：">
                  <a-select :value="ruleForm.grade" :default-value="gradeList[0]"  @change="handleChange">
                    <a-select-option v-for="(item,index) in gradeList" :key="index" :value="item">
                      {{item}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
                <a-form-model-item label="资质编号：">
                  <a-input v-model="ruleForm.number" />
                </a-form-model-item>
                <a-form-model-item label="所在省市:">
                  <a-select  @change="handleChange2" :value="ruleForm.area">
                    <a-select-option v-for="(v,i) in areaList" :key="i" :value="v">{{ v }} </a-select-option>
                  </a-select>
                </a-form-model-item>
                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                  <a-button type="primary" @click="onSubmit(ruleForm)" style="margin:auto; width:100px; border:none; background:#D71619; color:#fff">查询</a-button>
                </a-form-model-item>
              </a-form-model>
             </a-tab-pane>
                <a-tab-pane key="2" tab="图例">
                  <div class="map-logo"><img src="../../assets/images/sga.png" alt="" /><span>甲级测绘资质单位</span></div>
                  <div class="map-logo"><img src="../../assets/images/sgb.png" alt="" /><span>乙级测绘资质单位</span></div>
                  <div class="map-logo"><img src="../../assets/images/sgc.png" alt="" /><span>丙级测绘资质单位</span></div>
                  <div class="map-logo"><img src="../../assets/images/sgd.png" alt="" /><span>丁级测绘资质单位</span></div>
             </a-tab-pane>
            </a-tabs>
        </div>
        <div class="space-map">
            <div id="BaiduMap" ref="allmap"></div>
        </div>
   </div>
 </div>
</template>

//js
import { MP } from '../../js/map' 
import jia from '../../assets/images/sga.png'//地图自定义标注图标
import yi from '../../assets/images/sgb.png'//地图自定义标注图标
import bing from '../../assets/images/sgc.png'//地图自定义标注图标
import ding from '../../assets/images/sgd.png'//地图自定义标注图标
export default {
 name:"maps",
 data(){
     return{
       jia,
       yi,
       bing,
       ding,
       map:null,
       districtLoading:0,
       bList:[],
       dialogMap: true,
       mapGetshow: true,
       gradeList:["任意等级","甲级","乙级","丙级","丁级"],
       areaList:["北京","河北","上海","新疆","广东","天津"],
       ruleForm:{
         name:'',
         grade:'任意等级',
         number:'',
         area:'北京',
       },
      icon:'',
       data: [
        { x: 116.3964, y: 39.9093, name: '甲', area:'北京',grade:'甲级', number:'1'},
        { x: 117.333964, y: 39.9093, name: '乙', area:'天津',grade:'乙级', number:'2'},
        { x: 116.321568, y: 39.88648, name: '乙',area:'北京',grade:'乙级', number:'3'},
        { x: 116.495243, y: 40.756839, name: '丙', area:'北京',grade:'丙级', number:'4'},
        { x: 116.484243, y: 39.746539, name: '丁',  area:'北京',grade:'丁级', number:'5'}
       ] ,
       newData:[]
     }
 },
 mounted(){
     this.$nextTick(function () {
      var _this = this;
      MP(_this.ak).then(BMap => {
        this.map = new BMap.Map("BaiduMap");// 创建Map实例
        var point = new BMap.Point(116.3964, 39.9093);// 初始化地图
        this.map.centerAndZoom(point,10);//设置中心点坐标和地图级别
        this.map.enableScrollWheelZoom();//开启鼠标滚轮缩放
        this.drawMap(this.data)
        this.getBoundary()    
      })
    })
 },
 methods:{
     handleChange(value){
      this.ruleForm.grade = value;
     },
     handleChange2(value){
       this.ruleForm.area= value;
     },
     onSubmit({ name, number, grade, area}){
       console.log(name, number, grade, area)
          let _this = this;
          this.map.clearOverlays(); //清除地图上所有覆盖物
          if(grade == '任意等级'){
            this.newData = this.data.filter( item => {
              let matchArea = true;
              if(area){
                matchArea = item.area== area
              }
              return matchArea
            })
             console.log(this.newData)
          }
          else{
            this.newData = this.data.filter( item =>{
              let matchName = true;
              let matchNumber = true;
              let matchGrade = true;
              let matchArea = true;
              if(name){
                matchName = item.name == name
              }
              if(number){
                matchNumber = item.number == number
              }
              if(grade){
                matchGrade = item.grade == grade
              }
              if(area){
                matchArea = item.area== area
              }
              console.log(matchName,matchNumber,matchGrade,matchArea)
              return matchName && matchNumber && matchGrade && matchArea 
            })
            console.log(this.newData)
          }
          this.getBoundary()  
          this.drawMap(this.newData)
     },
     drawMap(pointList){
      let _this = this;
      pointList.forEach((v,i)=>{
        if(_this.ruleForm.area== v.area){
          let pointNumber = new BMap.Point(v.x,v.y)//创建point
          if(v.grade == '甲级'){
            _this.icon = jia
          }
          if(v.grade == "乙级"){
             _this.icon = yi
          }
          if(v.grade == "丙级"){
             _this.icon = bing
          }
          if(v.grade == "丁级"){
             _this.icon = ding
          }
          let content = `
            <div>
              <p>单位名称：${ v.name }</p>
              <p>资质等级：${ v.grade }</p>
              <p>资质证号：${ v.number}</p>
            </div>
          `
          let infoWindow = new BMap.InfoWindow(content ,{//信息窗口
            width:150,
           // height:100,
            title:"这是"+v.name//窗口标题
          })
          // var label = new BMap.Label(v.name,{//把data的name加入地图
          //   offset:new BMap.Size(25,5)
          // })
          var deviceSize = new BMap.Size(48,48)
          var deviceIcon = new BMap.Icon(_this.icon,deviceSize,{
            imageSize:deviceSize  
          })
          markerFun(pointNumber, infoWindow, deviceIcon)//markerFun(pointNumber, infoWindow, label, deviceIcon)
          }
      });
      function markerFun(points,infoWindow,deviceIcon){//function markerFun(points,infoWindow,label,deviceIcon){
        let markers = new BMap.Marker(points,{icon:deviceIcon});// 创建标注
        _this.map.addOverlay(markers);//把标注添加到地图中
        // markers.setLabel(label);//把data中name添加到地图
        markers.addEventListener('click',function(event){//标注点击事件
          _this.map.openInfoWindow(infoWindow,points);//参数：窗口、点  根据点击的点出现对应的窗口
        })
      }
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point);
          _this.map.addOverlay(mk);
          _this.map.panTo(r.point);
        } else {
          // alert('failed' + this.getStatus());
        }

      })
     },
     getBoundary(){//获取行政区域边界
       this.addDistrict(this.ruleForm.area)
     },
     //行政区域
     addDistrict(districtName){
       let _this = this;
       this.districtLoading ++;//控制加载过程
       var bdary = new BMap.Boundary();
       bdary.get(districtName,function(rs){//获取行政区域
         var count = rs.boundaries.length;//行政区域个数
         for(let i =0;i<count;i++){
           _this.bList.push({ points: rs.boundaries[i], name: districtName });
         };
         _this.districtLoading --;//加载完成区域点后计数器-1
         if(_this.districtLoading  == 0){
           _this.drawBoundary()//全加载完成后画端点
         }
       })
     },
     //画边界
     drawBoundary(){
       let _this = this;
       var pointArray = [];//包括所有区域的点数组
       for(let i=0;i<this.bList.length;i++){//循环添加
         var ply = new BMap.Polygon(_this.bList[i].points,{//多边形层及显示
            strokeWeight:2,
            trokeColor: '#0027EB',
           fillOpacity:0.01,//遮罩隐藏
            // fillColor:'00ffff'，
         });
         ply.name = _this.bList[i].name;
         _this.map.addOverlay(ply);
         var path = ply.getPath();
         pointArray = pointArray.concat(path);
       }
       this.map.setViewport(pointArray)//调整视野 
       this.bList = []//清空区域点数组
     },
  }
}

去掉百度地图logo：百度地图的Logo是使用css样式放上去的，我们可以使用css样式覆盖掉

<style scoped>
@deep: ~'>>>';
@{deep} .BMap_cpyCtrl {
 display: none;
}
@{deep} .anchorBL {
 display: none;
}
</style>
``