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>');


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