vue+element中引入百度地圖

1.首先你需要下載npm模塊,個人推薦：cnpm install vue-baidu-map –save 這樣你的package.json文件就有了配置信息；

2.然後在index.html文件中直接引用：

 <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=密鑰"></script>

ak密匙申請：送你直達

例如：

<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=自己申請的密鑰"></script>

3.去除左下角沒有百度地圖的logo和版本信息，可以在index.html的樣式中引入：

.BMap_cpyCtrl, .anchorBL {
      display: none;
}

4.開始進入你需要引入百度地圖的組件：

(1)首先引入百度地圖：

import BMap from 'BMap'

注意：vue 2.0 和3.0 的差異本來就很大，import BMap from 'BMap'  是2.0用的，當然在3.0也可以用，而

externals: {
    "BMap": "BMap"
}

是3.0用的，方式不一樣。

（2）組件的template中：

   <div id="map"></div>

（3）在methods中添加方法：

//創建地圖實例
createMap() {
    // 創建Map實例
    var map = new BMap.Map("map");
    var geolocation = new BMap.Geolocation();
    //調用百度地圖api 中的獲取當前位置接口
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            //獲取當前位置經緯度
            let myGeo = new BMap.Geocoder();
            myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function (result) {
                if (result) {
                    console.log(result);
                    // 初始化地圖,設置中心點座標和地圖級別
                    map.centerAndZoom(new BMap.Point(result.point.lng, result.point.lat), 11);//設置中心點
                    map.setCurrentCity("北京");        //由於有3D圖，需要設置城市哦
                    //開啓鼠標滾輪縮放,默認關閉
                    map.enableScrollWheelZoom(false)
                    //添加縮略圖控件
                    map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
                    //添加縮放平移控件
                    map.addControl(new BMap.NavigationControl());
                    //添加比例尺控件
                    map.addControl(new BMap.ScaleControl());
                    //添加地圖類型控件
                    map.addControl(new BMap.MapTypeControl());
                    var marker = new BMap.Marker(new BMap.Point(result.point.lng, result.point.lat));
                    //把標註添加到地圖上
                    map.addOverlay(marker);
                }
            });
        }
    });
}

（4）在生命週期函數mounted中（與methods同級）

mounted() {
    this.createMap();
}

（5）最後給地圖寬高：

#map {
      margin-top: 20px;
      height: 700px;
}

（6）效果圖：

那麼，vue中怎麼使用高德地圖呢？==》》vue中引入高德地圖