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文件，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度离线版DEMO</title>
<script type="text/javascript" src="js/apiv1.3.min.js"></script>
<!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script-->
<link rel="stylesheet" type="text/css" href="css/bmap.css"/>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container",{mapType: BMAP_NORMAL_MAP});      //设置卫星图为底图
var point = new BMap.Point(111.404, 40.915);    // 创建点坐标
map.centerAndZoom(point,5);                     // 初始化地图,设置中心点坐标和地图级别。

//map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。
map.enableKeyboard();                         // 启用键盘操作。  
map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
var marker = new BMap.Marker(point);
map.addOverlay(marker); 
</script>

然后把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代理百度地图，实现内网访问百度地图

猜你喜欢