vue項目中使用百度地圖API（疫情項目vue）

1.安裝地圖插件

npm i vue-baidu-map --save

2.在項目的main.js中引入地圖

  import BaiduMap from 'vue-baidu-map';
    Vue.use(BaiduMap, {
          /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
          ak: 'YOUR_APP_KEY'
    })

 

3.在你的vue項目的index.html中引入

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

4.在想用地圖的頁面中創建一個容器

  </div>
    <div id="allmap" style="width:100%;height:550px;"></div>
  </div>

5.使用地圖（在mounted中）

         // 百度地圖API功能
            var map = new BMap.Map("map");    // 創建Map實例
            map.centerAndZoom(new BMap.Point(121.551257,38.890002), 11);  // 初始化地圖,設置中心點坐標和地圖級別
            //添加地圖類型控件
            map.addControl(new BMap.MapTypeControl({
                mapTypes:[
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]}));
            map.setCurrentCity("北京");          // 設置地圖顯示的城市 此項是必須設置的
            map.enableScrollWheelZoom(true);     //開啟鼠標滾輪縮放