vue实现百度离线地图

index.html中加载百度离线地图js

<!--    百度离线地图-->
<script type="text/javascript" src="/static/cdnnms/bmap/map_load.js"></script>
<script type="text/javascript" src="/static/cdnnms/bmap/bmap_offline_api_v3.0_min.js"></script>

vue使用离线地图样例
/************************** BaiduMapBg ***************************/

<template>
  <div id="container" :style="bmapStyle" ></div>
</template>
<!--style="width: 1000px; height: 800px"-->
<!--:width ="bgWidth" :height="bgHeight"-->
<script>
// 百度地图api, http://lbsyun.baidu.com/index.php?title=jspopular/guide/show
// 百度地图javaScript api  https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference.html#a0b0
let map
export default {
  name: 'BaiduMapBg',
  props: {
    bgWidth: {
      type: Number,
      require: true
    },
    bgHeight: {
      type: Number,
      require: true
    }
  },
  data () {
    return {
      // bmapStyle: {}
    }
  },
  methods: {
    // resize (width, height) {
    //   this.width = width
    //   this.height = height
    //   map.reset()
    // },
    drawMap () {
      let options = {
        enableAutoResize: false, // 是否自动适应地图容器变化，默认启用
        enableMapClick: false // 是否开启底图可点功能，默认启用
      }
      map = new window.BMap.Map('container', options)

      let point = new window.BMap.Point(116.404, 39.915) // 创建点坐标
      map.centerAndZoom(point, 6) // 初始化地图，设置中心点坐标和地图级别
      // 添加地图类型控件
      map.addControl(new window.BMap.MapTypeControl({
        mapTypes: [
          window.BMAP_NORMAL_MAP,
          window.BMAP_HYBRID_MAP
        ]
      }))
      // map.addControl(new window.BMap.NavigationControl())
      map.setCurrentCity('北京') // 设置地图显示的城市 此项是必须设置的
      // map.enableScrollWheelZoom(false) // 开启鼠标滚轮缩放 true
      map.enableKeyboard() // 启用键盘操作
      // 单击获取点击的经纬度
      map.addEventListener('click', function (e) {
        alert('经纬度： ' + e.point.lng + ',' + e.point.lat)
      })
    }
  },
  computed: {
    bmapStyle () {
      return { width: this.bgWidth + 'px', height: this.bgHeight + 'px', overflow: 'scroll' }
    }
  },
  mounted () {
    // this.bmapStyle = {width: this.width + 'px', height: this.height + 'px'}
    // this.width = this.bgWidth
    // this.height = this.bgHeight
    this.$nextTick(() => {
      this.drawMap()
    })
  }
}
</script>

<style scoped>
  #container{
    margin: 0px;
  }
</style>

/************************************** map_load.js ********************************************/

let bmapcfg = {
  'imgext'      : '.jpg',   //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg
  'tiles_dir'   : '/static/cdnnms/bmap/tiles',       //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目录
  // 'tiles_dir'   : 'tiles',       //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目录
  'tiles_hybrid': '',       //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目录
  'tiles_self'  : ''        //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
};

//////////////////下面的保持不动///////////////////////////////////
var scripts = document.getElementsByTagName("script");
var JS__FILE__ = scripts[scripts.length - 1].getAttribute("src");  //获得当前js文件路径
bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf("/")+1); //地图API主目录

//bmapcfg.home = 'static/cdnnms/bmap/';

(function(){
  window.BMap_loadScriptTime = (new Date).getTime();
  //console.log(bmapcfg.home);
  // //加载地图API主文件
  // document.write('<script type="text/javascript" src='+bmapcfg.home+'bmap_offline_api_v3.0_min.js></script>');
  // //加载扩展函数
  // document.write('<script type="text/javascript" src='+bmapcfg.home+'map_plus.js></script>');
  // //加载城市坐标
  // document.write('<script type="text/javascript" src='+bmapcfg.home+'map_city.js></script>');


})();
///////////////////////////////////////////////////////////////////

标签：map,tiles,vue,地图,离线,height,width,window,百度
来源： https://www.cnblogs.com/wsb20200618/p/14971208.html