vue使用百度地图并设置自定义主题

安装vue-baidu-map

$ npm install vue-baidu-map --save

全局注册

//main.js
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap,{
  ak: '你在百度地图申请的key'
})

页面使用

<template>
  <div>
    <baidu-map id="allmap" @ready="mapReady" :scroll-wheel-zoom="true"> </baidu-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      point: {}
    };
  },
  methods: {
    mapReady({ BMap, map }) {
      this.point = new BMap.Point(118.287117, 33.961525);
      map.centerAndZoom(this.point, 15);
      map.setMapStyleV2({
        styleId: '你的主题id'
      });
    },
  },
};
</script>

<style>
/* 设定地图的大小 */
#allmap {
  height: 600px;
  width: 600px;
  margin: 0 auto;
}
</style>

这样使用目前是有问题的，样式加载不出来，还需在index.html引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的key"></script>