vue中使用百度地图

ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key
vue官网地址：https://dafrok.github.io/vue-baidu-map/#/zh/index

一、安装

npm install vue-baidu-map --save

二、全局注册

在main.js中一次性引入百度地图组件库的所有组件

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: 注册的ak密钥
})

三、使用

全局注册的地图组件，可以在任意vue中使用

<baidu-map class="bm-view">
</baidu-map>

<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>

项目经验

给地图加点击事件【 @click="getPoint"】，点击地图获取位置相关的信息，经纬度地址等
scroll-wheel-zoom：是否可以用鼠标滚轮控制地图缩放
zoom是视图比例
< bm-local-search :keyword="keyword"> 这个值被赋值就可以定位

 <el-input v-model="temp.address" placeholder="请输入地址来直接查找相关位置" clearable />
 <el-button class="confirm" @click="searchSite">定位</el-button>

<baidu-map :center="center" :zoom="15" :scroll-wheel-zoom="true" @click="getPoint" >
    <bm-view class="map" />
    <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location" style="width:0px;height:0px;overflow: hidden;" />
</baidu-map>

  temp: {
    address: '',
    lat:'',
    lng: ''
  },
  center: {
    lng: 118.049911,
    lat: 24.49664
  },
  location: '厦门市',
  keyword: '', // 地图搜索关键字

  getPoint(e) { // 地图点击事件 =》获取经纬度
      this.temp.lng = e.point.lng
      this.temp.lat = e.point.lat
      /* global BMap */
      const geocoder = new BMap.Geocoder() // 创建地址解析器的实例
      geocoder.getLocation(e.point, rs => { // 当前位置定位
        // const province = rs.addressComponents.province // 省
        // const city = rs.addressComponents.city // 城市
        // const district = rs.addressComponents.district // 区县
        // const street = rs.addressComponents.street // 街道
        // const streetNumber = rs.addressComponents.streetNumber// 门牌号
        // this.temp.address = province + city + district + street + streetNumber // 组装成地址
        this.temp.address = rs.address

        // console.log(rs.surroundingPois) // 附近的POI点(array) POI：兴趣点 可以是一栋房子、一个商铺、一个邮筒、一个公交站
        // console.log(rs.business) // 商圈字段，代表此点所属的商圈(string)
      })
    },

  searchSite() { // 定位
      this.keyword = this.temp.address
      console.log(this.keyword)
   },