2019百度地图离线地图制作

根据项目内网需求需要制作一个离线地图，因为外网访问不了在线地图api，因此这里使用了百度的离线地图，当时网上也找过，资源很少，需要改源文件，但很多是16年的帖子了，一改就错，因为百度更新了。。。

所以我知道这类资源是很少的，肯定会有很多人有这类需求但是不知道怎么做。

为了方便大家，因此这里分享一个demo，19年做的，成品已经交货了，这里就不贴出来了，剩个demo相当于最初的架子，也许你们更好搭一点

需要引入这些文件，如下图

其中bmap-offline是必需的配置文件,里面有个tiles是地图切片
index.html

<script type="text/javascript" src="./static/map_load.js"></script>
<script type="text/javascript" src="./static/AreaRestriction_min.js"></script>

组件:

import BMap from "BMap";

getMapCanvas() {
      var data = [
        {
          name: "小马",
          region_id: 1,
          online: 1,
          lng:"116.521264",
          lat: "40.567227",
          value: [116.521264, 40.567227],
          site_url: "xxxxxxxxx",
          car: 26
        },
        {
          name: "小马2",
          region_id: 2,
          online: 1,
          lng:"116.521264",
          lat: "40.567227",
          value: [116.521264, 40.567227],
          site_url: "xxxxxxxxx",
          car: 26
        },
        {
          name: "小马3",
          region_id: 3,
          online: 1,
          lng:"116.521264",
          lat: "40.567227",
          value: [116.521264, 40.567227],
          site_url: "xxxxxxxxx",
          car: 26
        }
      ];
      let myChart = this.$echarts.init(document.getElementById("myChart"));//初始化
      var arr = [];
      var geoCoordMap = {};
      var seriesArr = [];
      let colors = ["#38a3db", "#f13e3e", "#e28645"];//可以定义多个color
      for (let i = 0; i < data.length; i++) {//自定义对象
        var arr_obj = {
          name: data[i].name,
          region_id: data[i].region_id,
          online: data[i].online,
          value: [
            {
              name: "车辆",
              value: data[i].car
            }
          ]
        };
        arr.push(arr_obj);
        geoCoordMap[data[i].name] = data[i].value;
      }

      var convertData = function(arr) {//动态配置数据,对应信息的位置坐标
        var res = [];
        for (var i = 0; i < arr.length; i++) {
          var geoCoord = geoCoordMap[arr[i].name];
          if (geoCoord) {
            res.push({
              name: arr[i].name,
              region_id: arr[i].region_id,
              online: data[i].online,
              site_url: data[i].site_url,
              value: geoCoord.concat(arr[i].value)
            });
          }
        }
        return res;
      };
      for (let i = 1; i < 12; i++) {//symbolSize为圆点大小,这里根据value的大小动态规定圆点大小
        var con = convertData(arr)
        var seriesObj = {
          symbolSize: function(val) {
            if (val[2]) {
              if (val[2].value <= 500) {
                return 10;
              } else if (val[2].value > 500 && val[6].value <= 1000) {
                return 12;
              } else {
                return 14;
              }
            }
          },
          type: "scatter",
          coordinateSystem: "bmap",//定义bmap
          geoIndex: 0,
          label: {
            color: "#fff",
            show: false
          },
          data: con
        };
        seriesObj.name = i;
        seriesArr.push(seriesObj);//配置series对象
      }
      myChart.setOption({
        title: {
          text: "站点实时情况",
          left: "6%",
          top: "5%",
          textStyle: {
            color: "#666",
            fontSize: 18
          }
        },
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return (
              '<p class="el-icon-office-building" style="color:rgb(209, 209, 209);font-size:16px;font-weight:600;margin-bottom:10px;text-align:center;">' +
              "&nbsp;&nbsp;" +
              123 +
              "</p>"
            );
          }
        },
        bmap: {
          center: [this.lng, this.lat],//设置地图中心,处于canvas的中心点
          zoom: this.zoom,//缩放
          roam: true,//拉伸
          scaleLimit: { //缩放级别
            max: 10,
            min: 9
          }
        },
        color: colors,//颜色
        series: seriesArr//配置数据
      });
      var map = myChart
        .getModel()
        .getComponent("bmap")
        .getBMap();//初始化
      // map.centerAndZoom(new BMap.Point(116.521264, 40.567227), 9);//设置中心点
      // map.setCurrentCity("北京");//设置中心点名称
      map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
      // map.disableDragging();//是否禁止拖拽
      map.setMinZoom(9);//最小缩放级别
      map.setMaxZoom(13);//最大缩放级别
      map.addEventListener("zoomend", () => {//监听缩放
        this.zoom = map.getZoom();
      });

      map.addEventListener("mousemove", e => {//监听位移
        this.lng = e.point.lng;
        this.lat = e.point.lat;
      });
      var b = new BMap.Bounds(//设置地图范围(西北.东南)
        new BMap.Point(114.697919, 39.426638),
        new BMap.Point(118.413095, 41.444382)
      );
      try {//拖出范围后的报出异常
        BMapLib.AreaRestriction.setBounds(map, b);
      } catch (e) {
        this.$message({
          message: e,
          type: "error"
        });
      }
      // map.setMaxZoom({ zoom: 12 });
      // map.setMapStyleV2({//设置自定义样式,这里离线所以没有此api
      //   styleId: '6ee8ff46f537exxxxxxxxxxxxxxxxx'
      // });
      window.addEventListener("resize", function() {//监听重置canvas窗口
        myChart.resize();
      });
      var _this = this;
      myChart.on("click", function(params) {//当时做了一个点击站点跳转到对应的url
        if (params.data) {
          window.location.href = params.data.site_url;
        }
      });
    }

保存,刷新页面,f12看到打印

成功加载

ok!
所需文件我都发在博客里了