vue-baidu-map vue项目中使用百度地图（搜索，信息窗口，获取地点详细信息）

最近做了一个垃圾分类的项目，要求使用百度地图。主要实现以下几个功能：

1、点击地图获取到经纬度和地点信息

2、点击地图实时显示信息窗口

3、区域搜索功能，具体功能就是如下图 ↓

两个api网址，一个vue-baidu-map的api，一个JavaScript的百度地图api

vue-baidu-map：https://dafrok.github.io/vue-baidu-map/#/

JavaScript：http://lbsyun.baidu.com/jsdemo.htm#d0_1

话不多说，上代码，代码中做了详细的注释

地址：


 
 

  
  
  
  
  
  
  
  
  
    
      
站点：{{ add.siteName }}
      
站点地址：{{ add.site }}
    
  

上面是template中的代码，分的清楚一些，好识别

data(){
        return{
          jgNameDialog: false,
          show: false,
          postionMap:{  //地图坐标
            lng: 120.211486,
            lat: 30.256576
          },
          location: '',
          keyword: '',  //搜索框关键词
          zoom: 12.8,   //放大比例
          address:'',   //位置详细信息
          add:{
            siteName:'',
            site:'',
            jd:'',
            wd:'',
            desce:'',
            type:'',
            jgName:'',
            jgNum:'',
          },
          organizationData:[],
          jgName:'',
          jgNum:'',

        }
      },

},

methods:{
  getPoint(e){    //点击地图获取一些信息，
    this.show = true;
    this.postionMap.lng = e.point.lng;     //通过  e.point.lng获取经度
    this.postionMap.lat = e.point.lat;     //通过  e.point.lat获取纬度
    this.add.jd = e.point.lng;
    this.add.wd = e.point.lat;
    this.zoom = e.target.getZoom()

    let geocoder= new BMap.Geocoder();  //创建地址解析器的实例
    geocoder.getLocation(e.point,rs=>{
      this.add.site = rs.address;
      //地址描述(string)=
      // console.log(rs.address);    //这里打印可以看到里面的详细地址信息，可以根据需求选择想要的
      // console.log(rs.addressComponents);//结构化的地址描述(object)
      // console.log(rs.addressComponents.province); //省
      // console.log(rs.addressComponents.city); //城市
      // console.log(rs.addressComponents.district); //区县
      // console.log(rs.addressComponents.street); //街道
      // console.log(rs.addressComponents.streetNumber); //门牌号
      // console.log(rs.surroundingPois); //附近的POI点(array)
      // console.log(rs.business); //商圈字段，代表此点所属的商圈(string)
    });
  },
  infoWindowClose () {
    this.show = false
  },
  infoWindowOpen () {
    //这里有个问题纠结了很久，百度的信息窗口默认有个点击其他地方就消失的事件，我没有找到
    //并且信息窗口点击一次显示，一次消失
    //于是我加了一个100毫秒的定时器，保证每次点击地图都可以展示信息窗口
   setInterval(()=>{
     this.show = true
   },100)
  },
}

以上是我项目中使用的百度地图的一些功能，以后有额外功能再继续添加。