Nginx代理百度地图,实现内网访问百度地图

现在有一个项目,需要实现内网访问百度地图。上网查阅资料发现有以下两种思路:
1、离线百度地图api以及一些资源(控件、logo)
2、离线百度地图api以及一些资源(控件、logo、瓦片图)
没错,区别就在于需不需要把瓦片图下载到本地。方案2的难点在于:a.下载瓦片图,需要特定的下载程序,一般都是付费的,否则不全或有水印;b.命名瓦片图,在1.3版本中,需要依靠xyz的值来确定瓦片图的路径,有些博客有涉及。

综上所述,采用方案1比较简单,它的整体思路是:只把api对应的js文件和一些必需的资源本地化,放在一个html项目里(如果想要服务器,那么就放在网站的根目录里),那么瓦片图是如何获取的呢?思路就是把js文件里面的所有url都添加上代理服务器(就是可以连接外网的服务器)的ip和端口,然后在nginx的配置文件里设置好配置项location即可。

举个例子,我的服务器在内网中的ip是192.168.1.130,我想使用端口8080,js文件中有个api.map.baidu.com,那么把这个地址改为192.168.1.130:8080/api.map.baidu.com,相对应地,在nginx地配置文件要有
listen 8080
location /api.map.baidu.com/ {
proxy_pass http://api.map.baidu.com/;
}
下面进行具体介绍:
1 项目介绍
内网有若干终端,需要访问百度地图,还有一台可以连接外网的服务器。在服务器上部署nginx,终端通过服务器的代理来实现对百度地图的使用。
2 获取API
就是一个js文件,http://api.map.baidu.com/getscript
下载下来可读性极差,可以在线格式化,这个自行百度。
然后把js文件里面所有的url找出来,然后[ip]:[port]+url
另存为mapAPI.min.js
下面是所有的url(该js文件会更新,以最新的为准)

sapi.map.baidu.com
api.map.baidu.com

its.map.baidu.com
shangetu0.map.bdimg.com
shangetu1.map.bdimg.com
shangetu2.map.bdimg.com
shangetu3.map.bdimg.com
shangetu4.map.bdimg.com

online0.map.bdimg.com
online1.map.bdimg.com
online2.map.bdimg.com
online3.map.bdimg.com
online4.map.bdimg.com

ss0.baidu.com
ss0.bdstatic.com

d0.map.baidu.com
d1.map.baidu.com
d2.map.baidu.com
d3.map.baidu.com
map.baidu.com

3 新建html
建立一个html文件,引入上文的mapAPI.min.js文件,如下所示:





百度离线版DEMO





然后把js文件和html文件放在nginx的根目录下!(我还额外加了css文件)
3 修改nginx的conf文件

server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
		location / {
            root   html;
            index  index.html index.htm;
        }

        location /api.map.baidu.com/ {
			proxy_pass http://api.map.baidu.com/;
    	}
		location /sapi.map.baidu.com/ {
			proxy_pass http://sapi.map.baidu.com/;
    	}
		location /its.map.baidu.com/ {
			proxy_pass http://its.map.baidu.com/;
    	}
		
		
		location /shangetu0.map.bdimg.com/ {
			proxy_pass http://shangetu0.map.bdimg.com/;
    	}
		location /shangetu1.map.bdimg.com/ {
			proxy_pass http://shangetu1.map.bdimg.com/;
    	}
		location /shangetu2.map.bdimg.com/ {
			proxy_pass http://shangetu2.map.bdimg.com/;
    	}
		location /shangetu3.map.bdimg.com/ {
			proxy_pass http://shangetu3.map.bdimg.com/;
    	}
		location /shangetu4.map.bdimg.com/ {
			proxy_pass http://shangetu4.map.bdimg.com/;
    	}
		
		
		
		location /online0.map.bdimg.com/ {
			proxy_pass http://online0.map.bdimg.com/;
    	}
		location /online1.map.bdimg.com/ {
			proxy_pass http://online1.map.bdimg.com/;
    	}
		location /online2.map.bdimg.com/ {
			proxy_pass http://online2.map.bdimg.com/;
    	}
		location /online3.map.bdimg.com/ {
			proxy_pass http://online3.map.bdimg.com/;
    	}
		location /online4.map.bdimg.com/ {
			proxy_pass http://online4.map.bdimg.com/;
    	}
		
		
		
		location /d0.map.baidu.com/ {
			proxy_pass http://d0.map.baidu.com/;
    	}
		location /d1.map.baidu.com/ {
			proxy_pass http://d1.map.baidu.com/;
    	}
		location /d2.map.baidu.com/ {
			proxy_pass http://d2.map.baidu.com/;
    	}
		location /d3.map.baidu.com/ {
			proxy_pass http://d3.map.baidu.com/;
    	}
		
			
		location /ss0.baidu.com/ {
			proxy_pass http://ss0.baidu.com/;
    	}
		location /ss0.bdstatic.com/ {
			proxy_pass http://ss0.bdstatic.com/;
    	}
		location /map.baidu.com/ {
			proxy_pass http://map.baidu.com/;
    	}

        #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;
        }

4 终端输入服务器ip:8080
Nginx代理百度地图,实现内网访问百度地图_第1张图片
效果还行,支持地图缩放。不过由于时间急促,网页大小还没来得及调整。后面还会继续完善的。

你可能感兴趣的:(Nginx代理百度地图,实现内网访问百度地图)