论vue引入百度离线地图

简介: 先附上链接,下面会用到:百度地图传送门

百度离线地图步骤


链接

先附上链接,下面会用到:百度地图传送门


项目结构


第一步


打开百度地图传送门,找到图1这个接口,该接口的response写了百度地图引入的API文件

//response内容如下
(function(){ window.BMap_loadScriptTime = (new Date).getTime(); document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=E4805d16520de693a3fe707cdc962045&services=&t=20190622163250"></script>');})();

拿到response里面的src地址,浏览器打开之后是压缩的格式,打开控制台,点击图2的大括号按钮,就可以把代码格式化

然后文件保存到本地,重命名为map.js


第二步


  • 搜索oa(a,找到下面的内容,修改内容如图,目的是为了屏蔽ak验证。

  • 搜索z.url.domain.main_domain_nocdn.other,找到下面的内容,修改为如图。

z.ma后面的路径根据具体情况修改,该项目的离线地图项目结构见上方,z.ma的最终目的是引入images

补充一句,图上没有,下面的z.cj = z.url.proto + z.url.domain.main_domain_cdn.webmap[0] + "/";这一句下面,再加一句z.cj = '';, 查到资料,得加这么一句话

  • 搜索&mod,找到下面的内容,并修改

  • 搜索qt=vtile,找到下面的内容,并修改


第三步


查看地图引入的所有模块

map.js中找到下面内容,即为百度地图的所有模块,可以根据需要下载。


下载模块对应的JS文件

  1. 打开上面百度地图地址
  2. 左侧菜单随便选,从控制台找到下面这个接口

3.保存文件,重命名为刚才的"模块_字符串".js保存到modules文件夹里。

比如,要使用 map.js 的 marker 模块,map.js 文件里 marker 模块对应的字符串是 jkmdsc,
那就访问 http://api0.map.bdimg.com/getmodules?v=2.0&t=20140707&mod=marker_jkmdsc,重命名为 marker_jkmdsc.js ,放到 modules 文件夹里就好了。
  1. 获取地图瓦片 使用全能电子地图下载器下载所需地图,软件下载地址:全能电子地图下载器传送门
  2. 下载之后是类似于下图的文件结构,一个文件夹对应一个缩放级别的地图。


第四步


新建map_loader.js文件

//map_loader.js
(function() {
  window.BMap_loadScriptTime = new Date().getTime();
  window.BMap = window.BMap || {};
  window.BMap.apiLoad = function() {
    delete window.BMap.apiLoad;
  };
  document.write("<script src='/assets/js/bMap/map.js'></script>");
})();

整体的离线地图结构就结束了。

引入方式:

index.html
<!--这一句话要放在body的上面-->
<script type="text/javascript" src="<%= BASE_URL %>assets/js/bMap/map_loader.js"></script>

使用方式:

<template>
  <div id="bdMap" style="width: 100%; height: 500px;"></div>
</template>
<script>
  export default {
    mounted () {
      this.$nextTick(() => {
        this.drawMap()
      })
    },
    methods: {
      drawMap () {
        let map = new window.BMap.Map('bdMap', {})
        map.setCurrentCity('北京')
        map.centerAndZoom(new window.BMap.Point(116.404, 39.915), 10)
        map.enableScrollWheelZoom()
        // 如下两项推荐设置,否则没有对应级别的瓦片会出现空白
        map.setMinZoom(8)
        map.setMaxZoom(15)
      }
    }
  }
</script>


说明


  • 若需使用百度地图其他插件,可按上述方式处理。
  • vue中不可直接使用BMap而需要使用window.BMap
  • 如果重启遇到如下报错,栈溢出。

解决方法如下:

//package.json
//添加fix-memory-limit内容
{
    ...
   "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
  },
  ...
}

添加之后,安装两个npm包:increase-memory-limitcross-env

//package.json
//安装两个包
{
    ...
   "devDependencies": {
       "increase-memory-limit": "^1.0.3",
       "cross-env": "^5.0.5"
    }
  ...
}

安装完成后,执行命令:npm run fix-memory-limit,然后启动就可以了。

目录
相关文章
|
JavaScript 定位技术 API
百度离线地图API v3.0开发解决方案
百度离线地图API v3.0开发解决方案
736 0
|
3月前
|
JavaScript 定位技术
vue-baidu-map 绘制行政区划的轮廓,添加行政区划名称(含给覆盖物添加点击事件)——vue 百度地图开发
vue-baidu-map 绘制行政区划的轮廓,添加行政区划名称(含给覆盖物添加点击事件)——vue 百度地图开发
185 1
|
3月前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
179 0
|
3月前
|
JavaScript 定位技术
vue 百度地图开发【教程】3. 自定义百度地图主题
vue 百度地图开发【教程】3. 自定义百度地图主题
121 0
|
3月前
|
JavaScript 定位技术
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
282 0
|
5月前
|
JavaScript 定位技术
Vue百度地图组件说明文档
Vue百度地图组件说明文档
865 0
|
5月前
|
JavaScript 定位技术
Vue中使用百度地图demo Vue Baidu Map(vue-baidu-map)设置窗口信息
Vue中使用百度地图demo Vue Baidu Map(vue-baidu-map)设置窗口信息
292 0
|
5月前
|
JavaScript 搜索推荐 定位技术
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
|
5月前
|
存储 JSON JavaScript
vue整合kitymind百度脑图-引用打包文件方案
vue整合kitymind百度脑图-引用打包文件方案
111 0
|
资源调度 JavaScript
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
502 0

热门文章

最新文章