Vue调用百度地图组件及常见问题解决

项目场景：

Vue调用百度地图组件及常见问题解决

---

获取百度地图ak

地址：http://lbsyun.baidu.com/apiconsole/key
1、注册。填入姓名、手机号、验证码、邮箱点击提交。
2、打开邮箱，激活。
3、创建一个应用，填入应用名称，根据需要选取需要的服务。
选择服务器端，IP白名单如果不对IP有限制，可写0.0.0.0/0；选择浏览器端，不限制IP可写*

通过vue地图组件

1、安装

npm install vue-baidu-map --save

2、全局注册

全局注册

全局注册将一次性引入百度地图组件库的所有组件

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
//此处ak为在百度地图开发者平台申请到的密钥
  ak: ''
})

局部注册

如有按需引入组件需求，可选择局部注册百度地图组件，可减少工程打包后的容量。注：局部注册的BaiduMap组件必须声明ak属性。所有独立组件均存放在node_modules/vue-baidu-map/components文件夹下，按需引入即可。

<template>
  <baidu-map class="bm-view" ak="YOUR_APP_KEY">
  </baidu-map>
</template>


<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  }
}
</script>


<style>
//必须给baidu-map组件定义宽高，
//因为BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，
//百度地图将渲染在一个高度为 0 不可见的容器内。
.bm-view {
  width: 100%;
  height: 100%;
}
</style>

全局注册完成引入

全局注册完成后页面引入

<template>
<-- scroll-wheel-zoom属性为是否允许鼠标滚轮缩放地图 -->
 <baidu-map
     :center="center"
     :zoom="zoom"
     @ready="initMap"
     :scroll-wheel-zoom="true"
      class="map"
      >
 </baidu-map>    
</template>

<script>
export default {

data(){
	return{
	center: {
        lng: 0,//经度
        lat: 0 // 纬度
      }, 
     zoom: 10, // 地图等级
	}
}，

methods:{
	// 地图初始化方法
    initMap ({ BMap, map }) {
      this.center.lng = 116.800521
      this.center.lat = 33.962713
      this.zoom = 13
    },
}


}
</script>

<style>

.map{
  width: 100%;
  height: 100%;
}

</style>

由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类。

自定义地图样式

百度地图官方是可以支持自定义地图样式

第一步、发布百度地图样式

打开百度地图开发者平台，进入右上角控制台，选择左侧列表特色服务平台，点击个性化地图
进入个性化地图后，点击右上角新建，可选择样式模板，也可自行配色。
地图样式制作完成后点击可选择预览与发布。

发布完成后就可获得样式id,同时在我的地图样式中，也可以看到刚刚发布的地图

第二步，在initMap方法中通过setMapStyleV2传入样式id即可

initMap ({ BMap, map }) {
      map.setMapStyleV2({
        styleID: styleID
      })
      this.center.lng = 116.800521
      this.center.lat = 33.962713
      this.zoom = 13
    },

也可以通过下载样式json文件更改样式

initMap ({ BMap, map }) {
      const testJson = require('./config/custom_map_config.json')
      map.setMapStyleV2({
        styleJson: testJson
      })
      this.center.lng = 116.800521
      this.center.lat = 33.962713
      this.zoom = 13
    },

---

以上即为vue引用百度地图组件方式，后续会更新地图标点等后续功能，感谢浏览！