内网项目：vue + 百度离线地图 apiv2.0

男娘i 2024-04-17 22:50 27阅读 0赞

> 如果有了瓦片可以忽略掉这一步。[瓦片下载程序][Link 1] 提取码： rl1w

##### 一、下载地图瓦片, #####

制作离线地图的步骤：  
1、用Visual Studio打开解压的目录,这里使用的`Visual Studio 2019`  
![在这里插入图片描述][20190905114656423.png_pic_center]  
2、运行项目，下载瓦片地图，默认会在BaiduMapTile\\bin\\Debug下创建maptile目录，瓦片地图就保存在这个目录中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][20190905125819801.png_pic_center]  
3、测试地图数据将瓦片地图所在的目录maptile移到BaiduMapTile\\bin\\Debug\\html目录下,打开离线街道地图.html

如果单纯的使用离线地图,现在这样就可以了

> 瓦片计算和下载的关键代码在 TileDownloader.cs 中

##### 二、vue地图配置 #####

1、将现在的资源文件images、js、css文件都放到static目录下  
2、在index.html文件中引入资源文件

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Bmap-outline-test</title>
        <script type="text/javascript" src="static/js/apiv2.0_street.js"></script>
        <script type="text/javascript" src="static/js/AreaRestriction.js"></script>
        <script type="text/javascript" src="static/js/DrawingManager_one_rect.js"></script>
        <link rel="stylesheet" href="static/style/DrawingManager.css" />
    
      </head>
      <body>
        <div id="app"></div>
        
      </body>
    </html>

3、页面应用

<template>
        <div>
            <div style="width:100%;height:100%;border:1px solid gray;position:absolute;" id="mapShow"></div>
        </div>
    </template>
    
    <script>
        export default { 
            name: "Bmap-outline",
            data() { 
                return { 
                    map: null
                }
            },
            mounted() { 
                this.baiduMap()
            },
            methods: { 
                baiduMap() { 
                    let that = this
                    that.map = new BMap.Map("mapShow",{ mapType: BMAP_NORMAL_MAP});
                    let point = new BMap.Point(116.404, 39.915);
                    that.map.centerAndZoom(point,6);
                    that.map.addControl(new BMap.NavigationControl());
                    that.map.enableScrollWheelZoom(); 
                    that.map.enableKeyboard();
                }
            }
        }
    </script>
    
    <style scoped lang="scss">
    </style>

**`注意`**：地图资源过大可能导致vue项目内存溢出所以最好使用nginx反向代理地图资源路径。

server { 
            listen       7070;
            server_name  localhost;
            location / { 
    			root  E:\BaiduMapTile\BaiduMapTile\bin\Debug\maptile;#离线瓦片地图
            }
            error_page   500 502 503 504  /50x.html;
            location = /50x.html { 
                root   html;
            }
        }

这样就vue+离线地图就做好了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 2]

[Link 1]: https://pan.baidu.com/s/1dD-0ZLjqNRj-D5b7fAdg9Q
[20190905114656423.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d148940026594d84a621e8f47669cb47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5618cd54b1fe40c29d404acbd3a8030c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6305d6388c0b4be08817c66899cfce75.png
[20190905125819801.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/bc4b3d5e57d44991aabe214e7f90ad57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/fd00624ef6d444a0951c2f607180feee.png