百度地图离线开发demo（vue+百度地图3.0+百度瓦片）_百度地图瓦片v3.0.7版本

demo内容有：（海量数据地图绘制，迁徙图，弹窗边界避让的问题，热力图，初始化离线地图）,demo列的都是我有写过，并且实现的。有需求也可以说。我有时间写demo。瓦片没有找到免费的！我也没找到！可以自行找免费的瓦片！

公司需求开发离线地图功能。搜索学习，踩坑，试验（由于参考借鉴了n多文章，就不分别贴出对应文章了，感谢分享。。。），最终整合了一套集成vue的离线地图开发方案，文章将分享一整套的解决方案思路与方式。后续分为各个功能分享。百度地图的js为cdn引入。

（一）.所需资源

1.百度瓦片：采用获取瓦片加载的方式，加载离线地图，所以百度瓦片资源必不可少。软件下载瓦片，可以根据需要下载，而我使用的js的api我设置为png，所以类型可以勾选下载png格式，也支持主题自定义，只需要去百度地图个性化主题页面配置主题json，然后将json导入进来即可。瓦片就是地图请求的一张张瓦片切图，属静态资源放在服务器

 

2.百度地图离线3.0的开发js，

此处有遇到个坑，找到的可用的js，本地使用没有问题，但是放到服务器后，却不能正确找到引用的工具js。找不到的原因是在服务器上，异步的方式，会跟本地页面渲染无法同步。后续更换了api的获取方式，将inti.js放至服务器，因此可以正确引用到一些异步的资源。

引入js后初始化地图

<template>
  <div
    id="map"
  />
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.initMap();
  },
  //方法集合
  methods: {
    initMap() {
      this.map = new BMap.Map('map');//初始化地图
      this.map.centerAndZoom(new BMap.Point(119.342583,26.071764), 13);//设置地图中心和显示层级
      this.map.enableScrollWheelZoom(); //滚动地图
    },
  }
};
</script>

demo列表，后续增加开发中遇到的需求功能，目前demo是一些普通的基本地图操作，其中聚合点分组功能有进行修改，即对应聚合层级，数值将有实际意义，可在对应的数值范围设置对应的图标与样式