1：资源准备

1.1百度离线文件

链接: https://pan.baidu.com/s/1-3tZ6eZvp2vdCsWLi-9MAg 提取码: vjxa

1.2瓦片数据下载器

链接: https://pan.baidu.com/s/1MZjWobc1DQGX_ApYBNtROg 提取码: pxd1

2：构建vue的空项目

此步直接略过，不会的自行解决

3：在vue2.x中使用

3.1 把下载的1.1中的百度离线文件解压到 public/static下，static文件夹自己新建一个

3.2 在index.html中引入mao_load.js 文件

记住文件路径不要用相对路径 会报Uncaught SyntaxError: Unexpected token < 错误

<script src="<%= BASE_URL %>static/map_load.js"></script>

3.3 完了之后就新建文件，开始在页面上使用，这里我直接在HelloWorld.vue组件中使用的，做的demo

<template> <div class="hello"> <h1>{{ msg }}</h1> <p> For a guide and recipes on how to configure / customize this project, <br />check out the <a href="https://cli.vuejs.org" target="_blank" rel="noopener" >vue-cli documentation</a>. </p> <div class="wrap"> <div id="container"></div> <div id="container2"></div> </div> </div> </template> <script> export default { name: "HelloWorld", props: { msg: String }, mounted() { this.builmap(); }, methods: { builmap() { let map = new window.BMap.Map("container"); let point = new window.BMap.Point(114.28398, 30.601327); map.centerAndZoom(point, 12); map.enableScrollWheelZoom(true); map.addEventListener("click", function(e) { console.log(e.point.lng + "," + e.point.lat); }); let map2 = new window.BMap.Map("container2"); let point2 = new window.BMap.Point(114.28398, 30.601327); map2.centerAndZoom(point2, 12); map2.enableScrollWheelZoom(true); map2.addEventListener("click", function(e) { console.log(e.point.lng + "," + e.point.lat); }); } } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } .wrap { display: flex; justify-content: space-around; } #container { width: 500px; height: 500px; border: 1px solid red; } #container2 { width: 500px; height: 500px; border: 3px solid pink; } </style>

直接把代码贴出来了

4：瓦片做nginx代理

4.1 先下载nginx，博主直接放到桌面解压出来的，进入conf文件夹，直接用vscode打开nginx.conf文件，修改如下：

别的不用做修改，第36行是监听你的端口号，根据自己的实际情况做对应的修改

#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root E:/IMChenng/download/bmap_offline_demo/tiles; #瓦片地址 } #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; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} }

4.2 打开 bmap_offline_api_v3.0_min.js 文件 ，定位到 6518 行，根据自己实际情况，做如下的修改：

4.3 启动nginx，启动vue这个项目，就会发现，离线地图加载出来了，

控制台也不会报错，只要你下载了对应的瓦片数据。

4.3 贴上 github项目地址 打开即可

4.4 有什么不懂的，就留言评论或者私信吧。我也不是很懂。大家互相交流~