使用vue加载百度离线地图以及百度离线个性地图，主要是加载百度离线js，然后对地图进行初始化。

1. 首先在创建的vue项目中引入js
将离线地图模块放入static静态文件目录中 /static/offlinemap
<script src="/static/offlinemap/map_load.js"></script>
<script src="/static/offlinemap/customstyle/stylejson.js"></script>

2. 创建组件用于显示地图

<template>
<div>
	<div>this is a test</div>
  <div id="map_container" style="width: 100%; height: 500px;"></div>
  </div>
</template>
<script>
    export default {
        data() {
            return{

            }
        },
        mounted () {
            this.$nextTick(() => {
                this.drawMap()
            })
        },
        methods: {
            drawMap () {
              var map = new window.BMapGL.Map("map_container");    // 创建Map实例
              //初始化地图,设置中心点坐标和地图级别
              map.centerAndZoom(new BMapGL.Point(121.56847909,29.8100979777), 17)
              //开启鼠标滚轮缩放
              map.enableScrollWheelZoom(true);

              var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
              map.addControl(navi3DCtrl);

              var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
              map.addControl(scaleCtrl);

              var zoomCtrl = new BMapGL.ZoomControl();   // 添加缩放控件
              map.addControl(zoomCtrl);

              map.setMapStyleV2({styleJson: stylejson});
            }
        }
	}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html, body, #map_container{
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin:0;
		}

		.BMap_cpyCtrl {
			display: none;
		}

		.anchorBL {
			display: none;
		}

		.BMap_mask {
			z-index: 999;
		}
</style>

3. 配置路由及引用后，即可显示。
完整Demo：百度个性地图3D测试(WebGL V1.0) vue例子.zip