vue+离线百度地图

最新推荐文章于 2024-08-01 11:49:07 发布

景严

最新推荐文章于 2024-08-01 11:49:07 发布

阅读量6.2k

点赞数 1

文章标签： vue 离线百度地图

本文链接：https://blog.csdn.net/qq_44450612/article/details/103510607

版权

本文介绍了如何在Vue项目中集成离线百度地图。首先，需准备瓦片图并用nginx代理，然后在public目录下创建BMap文件夹存放资源，包括离线地图包、modules、css样式、基础图片和控件js文件。接着，在mapApi.js中配置离线地图路径，并在index.html引入。最后，在Vue组件中创建地图div并初始化。注意文件结构保持一致，否则可能出现错误。参考资源可在相关博客中获取。

摘要由CSDN通过智能技术生成

首先，使用离线百度地图首先需要准备好瓦片图，由于资源内容较大不适合直接放在项目中，因此使用nginx代理

server {
   
        listen       80;
        server_name  127.0.0.1;
        location / {
   
            root E:/BMap/baidumaps;				//配置本地百度地图离线资源路径
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
   
            root   html;
        }
    }

在public目录下新建BMap文件夹存放所需要的静态资源。
具体需要的文件有：

离线地图包 （main.js）
modules文件（百度地图提供的各种图层类，标记类，控件类等等都可以看作是modules，使用这些功能需要加载对应的模块js文件）
css样式
基础图片（包括marker在内的各种图标）
各个控件对应的js文件（比如绘图工具等）
创建mapApi.js文件，配置离线地图的路径指向：

var bmapConfig = {
   
	//填写本地的nginx代理地址，指向离线瓦片图资源
    'tiles_path': 'http://192.168.0.22/maptile', 
    'home': ''
  };
  (function() {
   
  //动态获取离线地图包的路径的函数