在Vue框架中使用百度地圖

1、首先在index.html中引入百度地圖

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘鑰"></script>

2、在組建中設置一個容器

<template>
  <div class="box">
    <div id="boxMap"></div>
  </div>
</template>

3、設置容器樣式

.box{
    width: 100%;
    min-height: 800px;
}
#boxMap {
    width: 100%;
    min-height: 800px;
}

 

4、創建地圖實例

export default {
data() {
      return {}
    },
    methods: {
      _getMapData() {
        let map = new BMap.Map("firePowerMap");  // 創建Map實例
        let point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 12);
        map.setCurrentCity("北京"); // 地圖顯示的城市
        map.enableScrollWheelZoom(true);  //開啟鼠標滾輪縮放
        window.map = map;//將map變量儲存在全局
        //****將map變量存儲在全局，只有將地圖儲存在全局，別的方法才能取到
      }
}

必須要給容器設置高度！

必須把地圖變量儲存在全局！