生活随笔
收集整理的這篇文章主要介紹了
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.comits.map.baidu.com
shangetu0.map.bdimg.com
shangetu1.map.bdimg.com
shangetu2.map.bdimg.com
shangetu3.map.bdimg.com
shangetu4.map.bdimg.comonline0.map.bdimg.com
online1.map.bdimg.com
online2.map.bdimg.com
online3.map.bdimg.com
online4.map.bdimg.comss0.baidu.com
ss0.bdstatic.comd0.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代理百度地图，实现内网访问百度地图的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
