百度地图内网访问方案
现在有一个项目，需要实现内网访问百度地图。上网查阅资料发现有以下两种思路：
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.，那么把这个地址改为192.168.1.130:8080/api.，相对应地，在nginx地配置文件要有。
listen 8080location /api./ {proxy_pass http://api./;}
实现方式
内网有若干终端，需要访问百度地图，还有一台可以连接外网的服务器。在服务器上部署nginx，终端通过服务器的代理来实现对百度图的使用。获取API就是一个js文件，http://api./getscript
下载下来可读性极差，可以在线格式化，这个自行百度。
然后把js文件里面所有的url找出来，然后修改为[ip]:[port]+url，另存为apiv1.3.min.js
下面是所有的url（该js文件会更新，以最新的为准）
sapi.api.its.shangetu0.shangetu1.shangetu2.shangetu3.shangetu4.online0.online1.online2.online3.online4.d0.d1.d2.d3.
新建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./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文件） 修改nginx的conf文件，注意监听端口一定要是80xx，不然有些url不能访问。
重启NG后如果某些url不能访问，请将资源配置location转发。
server {listen 80;server_name ;location /test {root html;index indextest.html indextest.htm;}location /api./ {set $args "ak=ndTT3OvHXm8CftOj0EhVDGnaSmXom7Fw";proxy_pass http://api./;}location /sapi./ {proxy_pass http://sapi./;}location /its./ {proxy_pass http://its./;}location /shangetu0./ {proxy_pass http://shangetu0./;}location /shangetu1./ {proxy_pass http://shangetu1./;}location /shangetu2./ {proxy_pass http://shangetu2./;}location /shangetu3./ {proxy_pass http://shangetu3./;}location /shangetu4./ {proxy_pass http://shangetu4./;}location /online0./ {proxy_pass http://online0./;}location /online1./ {proxy_pass http://online1./;}location /online2./ {proxy_pass http://online2./;}location /online3./ {proxy_pass http://online3./;}location /online4./ {proxy_pass http://online4./;}location /d0./ {proxy_pass http://d0./;}location /d1./ {proxy_pass http://d1./;}location /d2./ {proxy_pass http://d2./;}location /d3./ {proxy_pass http://d3./;}location // {proxy_pass /;}location // {proxy_pass /;}location // {proxy_pass /;}location // {proxy_pass /;}location // {proxy_pass /;} location // {proxy_pass /;}location // {proxy_pass /;}location /api0./ {proxy_pass http://api0./;}#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;}}
参考：
NG搭建百度地图环境：/qq_38491310/article/details/87301919
/hongyu799/article/details/104768178/?utm_medium=distribute.pc_relevant.none-task-blog-title-3&spm=1001.2101.3001.4242父子页面参数传递：/songxiaolingbaobao/article/details/81284061相关资源地址：
链接：/s/1LxeNS7OWfGXz_4QHGUtHQw
提取码：i77d
复制这段内容后打开百度网盘手机App，操作更方便哦
要替换的域名有53处（文件名apiv1.3.min.js）
z.kM = {TILE_BASE_URLS: ["//5bwHcj7lABFU8t_jkk_Z1zRvfdw6buu", "/5bwHcj7lABFV8t_jkk_Z1zRvfdw6buu", "/5bwHcj7lABFS8t_jkk_Z1zRvfdw6buu", "/5bwHcj7lABFT8t_jkk_Z1zRvfdw6buu", "/5bwHcj7lABFY8t_jkk_Z1zRvfdw6buu"],TILE_ONLINE_URLS: ["/", "", "", ""],TIlE_PERSPECT_URLS: ["//-OR1cTe9KgQFm2e88IuM_a", "/-ON1cTe9KgQFm2e88IuM_a", "/-OZ1cTe9KgQFm2e88IuM_a", "/-OV1cTe9KgQFm2e88IuM_a"],geolocControl: "//8LkJsjOpB1gCo2Kml5_Y_D3",TILES_YUN_HOST: ["//-eR1bSahKgkFkRGko9WTAnF6hhy", "/-eN1bSahKgkFkRGko9WTAnF6hhy", "/-eZ1bSahKgkFkRGko9WTAnF6hhy", "/-eV1bSahKgkFkRGko9WTAnF6hhy"],traffic: "//7_AZsjOpB1gCo2Kml5_Y_DAcsMJiwa",iw_pano: "//5LUZemba_QUU8t7mm9GUKT-xh_",message: "//7vo0bSba2gU2pMbgoY3K",baidumap: "//80MWsjip0QIZ8tyhnq",wuxian: "//6a1OdTeaKgQFm2e88IuM_a",pano: ["//5LUZemba_QUU8t7mm9GUKT-xh_", "/5LUZemfa_QUU8t7mm9GUKT-xh_", "/5LUZemja_QUU8t7mm9GUKT-xh_"],main_domain_nocdn: {baidu: "//9_Q4sjOpB1gCo2Kml5_Y_D3",other: "/api."},main_domain_cdn: {baidu: ["//9_Q4vHSd2RZ3otebn9fN2DJv", "//9_Q4vXSd2RZ3otebn9fN2DJv", "//9_Q4vnSd2RZ3otebn9fN2DJv"],other: ["/api."],webmap: ["//6b1IcTe9R1gBo1vgoIiO_jowehsv"]},map_click: "//80MWbzKh2wt3n2qy8IqW0jdnxx1xbK",vector_traffic: "//8aZ1cTe9KgQIm2_p8IuM_a"};z.qY = {TILE_BASE_URLS: ["/shangetu0.", "/shangetu1.", "/shangetu2.", "/shangetu3.", "/shangetu4."],TILE_ONLINE_URLS: ["/", "/", "/", "/"],TIlE_PERSPECT_URLS: ["/d0.", "/d1.", "/d2.", "/d3."],geolocControl: "/loc.",TILES_YUN_HOST: ["/g0.api.", "/g1.api.", "/g2.api.", "/g3.api."],traffic: "/its.:8002",iw_pano: "/pcsv0.",message: "/j.",baidumap: "/",wuxian: "/",pano: ["/pcsv0.", "/pcsv1.", "/pcsv2."],main_domain_nocdn: {baidu: "/api."},main_domain_cdn: {baidu: ["/api0.", "/api1.", "/api2."],webmap: ["/webmap0."]},map_click: "/mapclick.",vector_traffic: "/or."};
替换捕捉及访问
编写vue页面
vue是需要集成NG中的百度地图界面。代码如下。
在mount方法中加入以下代码。
mounted() {// 通知ifame中的内容this.sendPostMessage(response.data.gpsAddr)}// 下面是sendPost方法```javascriptsendPostMessage(addrs) {const mapFrame = this.$refs['mapFrame']const iframeWin = mapFrame.contentWindowiframeWin.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./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)
