手把手教你内网环境搭建百度地图

百度地图内网访问方案

现在有一个项目,需要实现内网访问百度地图。上网查阅资料发现有以下两种思路:
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,另存为apiv1.3.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
  1. 新建html
    建立一个html文件,引入上文的mapAPI.min.js文件,如下所示:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度离线版DEMOtitle>
<script type="text/javascript" src="js/apiv1.3.min.js">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>

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

手把手教你内网环境搭建百度地图_第1张图片

  1. 修改nginx的conf文件,注意监听端口一定要是80xx,不然有些url不能访问。

重启NG后如果某些url不能访问,请将资源配置location转发。

server {
     
    
    listen       80;
    server_name  zhongktest.xxx.com;

    location /test {
     
            root   html;
            index  indextest.html indextest.htm;
        }

        location /api.map.baidu.com/ {
     
                        set $args "ak=ndTT3OvHXm8CftOj0EhVDGnaSmXom7Fw";
			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/;
    	}
        
        location /maponline3.bdimg.com/ {
     
                        proxy_pass http://maponline3.bdimg.com/;
        }
        

         location /maponline2.bdimg.com/ {
     
                        proxy_pass http://maponline2.bdimg.com/;
        }        

        location /maponline1.bdimg.com/ {
     
                        proxy_pass http://maponline1.bdimg.com/;
        }
        
        location /maponline0.bdimg.com/ {
     
                        proxy_pass http://maponline0.bdimg.com/;
        }
        
        location /api0.map.bdimg.com/ {
     
                        proxy_pass http://api0.map.bdimg.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;
        }
}

参考:

  1. NG搭建百度地图环境:
    https://blog.csdn.net/qq_38491310/article/details/87301919
    https://blog.csdn.net/hongyu799/article/details/104768178/?utm_medium=distribute.pc_relevant.none-task-blog-title-3&spm=1001.2101.3001.4242
  2. 父子页面参数传递:https://blog.csdn.net/songxiaolingbaobao/article/details/81284061
  3. 相关资源地址:
    链接:https://pan.baidu.com/s/1LxeNS7OWfGXz_4QHGUtHQw
    提取码:i77d
    复制这段内容后打开百度网盘手机App,操作更方便哦

要替换的域名有53处(文件名apiv1.3.min.js)


    z.kM = {
     
        TILE_BASE_URLS: ["zhongktest.xxx.com/gss0.bdstatic.com/5bwHcj7lABFU8t_jkk_Z1zRvfdw6buu", "gss0.bdstatic.com/5bwHcj7lABFV8t_jkk_Z1zRvfdw6buu", "gss0.bdstatic.com/5bwHcj7lABFS8t_jkk_Z1zRvfdw6buu", "gss0.bdstatic.com/5bwHcj7lABFT8t_jkk_Z1zRvfdw6buu", "gss0.bdstatic.com/5bwHcj7lABFY8t_jkk_Z1zRvfdw6buu"],
        TILE_ONLINE_URLS: ["zhongktest.xxx.com/maponline0.bdimg.com", "maponline1.bdimg.com", "maponline2.bdimg.com", "maponline3.bdimg.com"],
        TIlE_PERSPECT_URLS: ["zhongktest.xxx.com/gss0.bdstatic.com/-OR1cTe9KgQFm2e88IuM_a", "gss0.bdstatic.com/-ON1cTe9KgQFm2e88IuM_a", "gss0.bdstatic.com/-OZ1cTe9KgQFm2e88IuM_a", "gss0.bdstatic.com/-OV1cTe9KgQFm2e88IuM_a"],
        geolocControl: "zhongktest.xxx.com/gsp0.baidu.com/8LkJsjOpB1gCo2Kml5_Y_D3",
        TILES_YUN_HOST: ["zhongktest.xxx.com/gsp0.baidu.com/-eR1bSahKgkFkRGko9WTAnF6hhy", "gsp0.baidu.com/-eN1bSahKgkFkRGko9WTAnF6hhy", "gsp0.baidu.com/-eZ1bSahKgkFkRGko9WTAnF6hhy", "gsp0.baidu.com/-eV1bSahKgkFkRGko9WTAnF6hhy"],
        traffic: "zhongktest.xxx.com/gsp0.baidu.com/7_AZsjOpB1gCo2Kml5_Y_DAcsMJiwa",
        iw_pano: "zhongktest.xxx.com/gss0.bdstatic.com/5LUZemba_QUU8t7mm9GUKT-xh_",
        message: "zhongktest.xxx.com/gsp0.baidu.com/7vo0bSba2gU2pMbgoY3K",
        baidumap: "zhongktest.xxx.com/gsp0.baidu.com/80MWsjip0QIZ8tyhnq",
        wuxian: "zhongktest.xxx.com/gsp0.baidu.com/6a1OdTeaKgQFm2e88IuM_a",
        pano: ["zhongktest.xxx.com/gss0.bdstatic.com/5LUZemba_QUU8t7mm9GUKT-xh_", "gss0.bdstatic.com/5LUZemfa_QUU8t7mm9GUKT-xh_", "gss0.bdstatic.com/5LUZemja_QUU8t7mm9GUKT-xh_"],
        main_domain_nocdn: {
     
            baidu: "zhongktest.xxx.com/gsp0.baidu.com/9_Q4sjOpB1gCo2Kml5_Y_D3",
            other: "zhongktest.xxx.com/api.map.baidu.com"
        },
        main_domain_cdn: {
     
            baidu: ["zhongktest.xxx.com/gss0.bdstatic.com/9_Q4vHSd2RZ3otebn9fN2DJv", "zhongktest.xxx.com/gss0.baidu.com/9_Q4vXSd2RZ3otebn9fN2DJv", "zhongktest.xxx.com/gss0.bdstatic.com/9_Q4vnSd2RZ3otebn9fN2DJv"],
            other: ["zhongktest.xxx.com/api.map.baidu.com"],
            webmap: ["zhongktest.xxx.com/gss0.baidu.com/6b1IcTe9R1gBo1vgoIiO_jowehsv"]
        },
        map_click: "zhongktest.xxx.com/gsp0.baidu.com/80MWbzKh2wt3n2qy8IqW0jdnxx1xbK",
        vector_traffic: "zhongktest.xxx.com/gss0.bdstatic.com/8aZ1cTe9KgQIm2_p8IuM_a"
    };
     z.qY = {
     
        TILE_BASE_URLS: ["zhongktest.xxx.com/shangetu0.map.bdimg.com", "zhongktest.xxx.com/shangetu1.map.bdimg.com", "zhongktest.xxx.com/shangetu2.map.bdimg.com", "zhongktest.xxx.com/shangetu3.map.bdimg.com", "zhongktest.xxx.com/shangetu4.map.bdimg.com"],
        TILE_ONLINE_URLS: ["zhongktest.xxx.com/maponline0.bdimg.com", "zhongktest.xxx.com/maponline1.bdimg.com", "zhongktest.xxx.com/maponline2.bdimg.com", "zhongktest.xxx.com/maponline3.bdimg.com"],
        TIlE_PERSPECT_URLS: ["zhongktest.xxx.com/d0.map.baidu.com", "zhongktest.xxx.com/d1.map.baidu.com", "zhongktest.xxx.com/d2.map.baidu.com", "zhongktest.xxx.com/d3.map.baidu.com"],
        geolocControl: "zhongktest.xxx.com/loc.map.baidu.com",
        TILES_YUN_HOST: ["zhongktest.xxx.com/g0.api.map.baidu.com", "zhongktest.xxx.com/g1.api.map.baidu.com", "zhongktest.xxx.com/g2.api.map.baidu.com", "zhongktest.xxx.com/g3.api.map.baidu.com"],
        traffic: "zhongktest.xxx.com/its.map.baidu.com:8002",
        iw_pano: "zhongktest.xxx.com/pcsv0.map.bdimg.com",
        message: "zhongktest.xxx.com/j.map.baidu.com",
        baidumap: "zhongktest.xxx.com/map.baidu.com",
        wuxian: "zhongktest.xxx.com/wuxian.baidu.com",
        pano: ["zhongktest.xxx.com/pcsv0.map.bdimg.com", "zhongktest.xxx.com/pcsv1.map.bdimg.com", "zhongktest.xxx.com/pcsv2.map.bdimg.com"],
        main_domain_nocdn: {
     
            baidu: "zhongktest.xxx.com/api.map.baidu.com"
        },
        main_domain_cdn: {
     
            baidu: ["zhongktest.xxx.com/api0.map.bdimg.com", "zhongktest.xxx.com/api1.map.bdimg.com", "zhongktest.xxx.com/api2.map.bdimg.com"],
            webmap: ["zhongktest.xxx.com/webmap0.map.bdimg.com"]
        },
        map_click: "zhongktest.xxx.com/mapclick.map.baidu.com",
        vector_traffic: "zhongktest.xxx.com/or.map.bdimg.com"
    };

替换捕捉及访问

编写vue页面

vue是需要集成NG中的百度地图界面。代码如下。
手把手教你内网环境搭建百度地图_第2张图片
在mount方法中加入以下代码。

mounted() {
     
  // 通知ifame中的内容
  this.sendPostMessage(response.data.gpsAddr)
}

// 下面是sendPost方法
```javascript
sendPostMessage(addrs) {
     
      const mapFrame = this.$refs['mapFrame']
      const iframeWin = mapFrame.contentWindow
      iframeWin.postMessage(addrs, '*')
    }

nginx中的页面

<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"/>
<style>
    body,
    html,
    #container {
     
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    </style>
</head>
<body>
<div style="width:800px;height:360px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
window.addEventListener('message',function(e){
     
        var map = new BMap.Map('container');
        var gpsAdd = JSON.parse(e.data);
        console.log(gpsAdd);
        map.centerAndZoom(new BMap.Point(gpsAdd[0].lng,gpsAdd[0].lat),11);
        map.enableScrollWheelZoom(true);
        
        // 创建点标记
        var point1 = new BMap.Point(gpsAdd[0].lng,gpsAdd[0].lat);
        var point2 = new BMap.Point(gpsAdd[1].lng,gpsAdd[1].lat);
        var point3 = new BMap.Point(gpsAdd[2].lng,gpsAdd[2].lat);
        
        var marker1 = new BMap.Marker(point1);
        var marker2 = new BMap.Marker(point2);
        var marker3 = new BMap.Marker(point3);
        // 在地图上添加点标记
        var opts1 = {
     
                position : point1,    // 指定文本标注所在的地理位置
                offset   : new BMap.Size(15, -30)    //设置文本偏移量
         }
        var opts2 = {
     
                position : point2,    // 指定文本标注所在的地理位置
                offset   : new BMap.Size(-30, 15)    //设置文本偏移量
         }
        var opts3 = {
     
                position : point3,    // 指定文本标注所在的地理位置
                offset   : new BMap.Size(15, -30)    //设置文本偏移量
         }
         var label = new BMap.Label("门店地址", opts1);  // 创建文本标注对象
        var label2 = new BMap.Label("居住地址", opts2);  // 创建文本标注对象
        var label3 = new BMap.Label("公司地址", opts3);  // 创建文本标注对象
  label.setStyle({
     
    color : "red",
    fontSize : "20px",
    fontFamily:"微软雅黑"
   });
  label2.setStyle({
     
    color : "red",
    fontSize : "20px",
    fontFamily:"微软雅黑"
   });
  label3.setStyle({
     
    color : "red",
    fontSize : "20px",
    fontFamily:"微软雅黑"
   });
 map.addOverlay(label);
 map.addOverlay(label2);
 map.addOverlay(label3);
 map.addOverlay(marker1);
 map.addOverlay(marker2);
 map.addOverlay(marker3);
},false)
function addText(value) {
     
                        console.log(value);
                    }
window.removeEventListener('message',myFunction,false)

样式如下

手把手教你内网环境搭建百度地图_第3张图片

你可能感兴趣的:(Java,Nginx)