vue中引入百度离线地图

前几天在vue中引入了在线百度地图，并根据demo测试，写了几种方法《vue中引入在线百度地图》，今天就介绍如何在vue中引入百度离线地图。

1、首先要准备下载百度离线地图所需的文件，文件地址：vue中引入百度离线地图所需文件
里面缺少了bmap_offline_api_v3.0_min.js，自己可以百度查询下载或者留言发邮箱

在这里就不介绍百度离线地图下载方式了，自己百度查询

2、其次将所需要的文件引入到index.html

 	<script type="text/javascript" src="static/map_load.js"></script>
    <script type="text/javascript" src="static/bmap_offline_api_v3.0_min.js"></script>
    <script type="text/javascript" src="static/map_plus.js"></script>
    <script type="text/javascript" src="static/map_city.js"></script>

上述目录tiles中，为百度离线地图解压包，也就是百度离线瓦片图（不建议将百度离线地图放入static文件下，主要是因为当文件过大时，在npm run dev的时候会出现内存溢出 ），所以建议用nginx代理：

server {
        listen       8866;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
			root  E:\BaiduMap;					#放入你百度离线的路径
			#index  index.html;
        }
        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

如果使用nginx代理，打开bmap_offline_api_v3.0_min.js文件，找到6517行将代理地址拷贝进行替换，这里我进行修改，可以替换下面代码，将代理地址添加即可

var test2=("你nginx所代理的百度地图文件地址"+b+"/" + (e + "").replace(/-/gi, "M") + "/" + (a + "").replace(/-/gi, "M") + ".png").replace(/-(\d+)/gi, "M$1");
 return test2;

如上述，假如电脑IP地址为：10.82.25.25，代理地址就可以为：10.82.25.25:8866/（记住/这一斜杠别忘添加）

3.新建map.vue文件

4、创建百度地图，在这里为了调用map的其他方法（如画圆、测距等），我把map存一个所谓的全局变量，方便调用

<template>
    <div id='MapBox'>
        <div  class='baiduMap' id='mapShow'></div>
    </div>
</template>
<script>
import "../../static/map_load.js"
export default {
name:'baiduMap',
    data() {
        return{
            map:undefined,    
            overView:undefined,
            marker:undefined,
        }
    },
     mounted(){
        this.baiduMap();
    },
     methods:{
		 baiduMap:function(){
			var me=this;
			me.map = new BMap.Map("mapShow")
			var point = new BMap.Point(114.065537,22.553321);  // 创建点坐标  
			me.marker=new BMap.Marker(point);
            me.overView=new BMap.OverviewMapControl({isOpen: true});//缩略地图控件。
            me.map.addControl(me.overView);
            me.map.addOverlay(me.marker);//添加一个标注
            me.map.centerAndZoom(point, 13);                 // 初始化地图，设置中心点坐标和地图级别  
            me.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放  
			}
	}
}
<style>
#MapBox {
		width: 100%;
		height: 100%;
		padding: 10px;
        position: relative;
    }
    /* 地图 */
.baiduMap{
    height: 100%;
    width: 100%;
}  
 /* 去除地图上，左下字体标注 */
.anchorBL{
          display:none;
}
</style>

5、获取的百度地图，如图所示：

6、去除地图左下角字体标注，（2018 Baidu - GS(2016)2089号 - 甲测资字1100930 - 京ICP证030173号 - Data © 长地万方）

可以通过设置：

 /* 去除地图上，左下字体标注 */
.anchorBL{
          display:none;
}

参考来源：
百度离线地图JS API V3.0