生活随笔
收集整理的這篇文章主要介紹了
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代理百度地图,实现内网访问百度地图的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。