看了很多文章對Vue中如何使用寫的都很亂，下面貼一下自己做了簡單的方法提取，還有開發(fā)過程中遇到的神坑。

注意事項(xiàng)

• 首先要在index.html 的head標(biāo)簽中要掛載<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=str&t=20170517145936"></script>，str為申請獲得的一段字符串，v為版本也需要添加上。
• 百度地圖中如果需要添加實(shí)時(shí)交通，這類懸浮框的控件，需要另外引入CSS、JS文件，如：TrafficControl_min.js，TrafficControl_min.css，熱地圖需引入heatmap.js
• 百度地圖熱力圖，需要大量坐標(biāo)才能生成不同色塊，methods方法中的addHot是我自己寫的隨機(jī)生成坐標(biāo)點(diǎn)函數(shù)，根據(jù)地圖中心點(diǎn)來計(jì)算。

正文

Vue實(shí)例上的methods存儲(chǔ)各個(gè)空間的方法，在mounted中進(jìn)行初始化渲染。

功能目錄

• addLineVideo --地圖中心處生成牽引線，線條起始及終點(diǎn)位置固定，自己寫的比較粗糙。
• mapMoveSelf--地圖縮放及視覺中心點(diǎn)地理位置重置。
• addIcon-- 地圖上的圖標(biāo)。
• addMenu-- 添加放大縮小控件
• addLocaPosition-- 添加定位控件
• addControl -- 添加工具條，比例尺控件
• addControlCityList -- 添加城市下拉列表控件
• addLine -- 添加曲線
• addCustControl -- 自定義放大縮小懸浮控件
• addLoad -- 實(shí)時(shí)路況 需要引入額外文件
• addHot -- 熱力圖 需要引入額外文件

methods部分掛在各功能函數(shù)
mapMoveSelf(map){
    console.log(map)
    setTimeout(function(){
        map.panTo(new BMap.Point(119.906441,29.457793));
    }, 1000);
    setTimeout(function(){
        map.setZoom(14);
    },4000);
},
addIcon(map){
    var points = [
            [120.018874,29.48683],
            [119.923671,29.514494],
            [119.906441,29.457793],
            [119.965029,29.403953],
            [119.915029,29.303953],
            [119.935029,29.203953],
            [119.945029,29.453953],
            [119.765029,29.363953]
        ];
    // 向地圖添加標(biāo)注
    for( var i = 0;i < points.length; i++){
    //定義新圖標(biāo)
    var myIcon = new BMap.Icon(require("../../../assets/images/wifi.png"), new BMap.Size(44, 44), {
    // 指定定位位置
    offset: new BMap.Size(10, 25),
    // 當(dāng)需要從一幅較大的圖片中截取某部分作為標(biāo)注圖標(biāo)時(shí)，需要指定大圖的偏移位置 
    //imageOffset: new BMap.Size(0, 0 - i * 25)  設(shè)置圖片偏移 
    });
    var point = new BMap.Point(points[i][0],points[i][1]);
    // 創(chuàng)建標(biāo)注對象并添加到地圖 
    var marker = new BMap.Marker(point,{icon: myIcon});
    map.addOverlay(marker);
    };
    //添加新圖標(biāo)的監(jiān)聽事件
    marker.addEventListener('click',function(){
        var p = marker1.getPosition();//獲取位置
        // alert("點(diǎn)擊的位置是：" + p.lng + ',' + p.lat);
    })
},
addMenu(map){
    var menu = new BMap.ContextMenu();

    var txtMenuItem = [
        {
            text:'放大',
            callback:function(){map.zoomIn()}
        },
        {
            text:'縮小',
            callback:function(){map.zoomOut()}
        }
    ];
    for(var i=0; i < txtMenuItem.length; i++){
        menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
    }
    map.addContextMenu(menu);
},
addLocaPosition(map){
    //添加定位組件
    var geolocationControl = new BMap.GeolocationControl();
    geolocationControl.addEventListener("locationSuccess", function(e){
    // 定位成功事件
    var address = '';
    address += e.addressComponent.province;
    address += e.addressComponent.city;
    address += e.addressComponent.district;
    address += e.addressComponent.street;
    address += e.addressComponent.streetNumber;
    alert("當(dāng)前定位地址為：" + address);
    });
    geolocationControl.addEventListener("locationError",function(e){
    // 定位失敗事件
    alert(e.message);
    });
    map.addControl(geolocationControl)
},
addControl(map){
    //添加工具條、比例尺控件
    map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}));
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,type:BMAP_NAVIGATION_CONTROL_SMALL}));
    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT,type: BMAP_NAVIGATION_CONTROL_LARGE,enableGeolocation: true}));
},
addControlCityList(map){
    //創(chuàng)建城市下拉列表控件；
    map.addControl(new BMap.CityListControl({
        anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
        offset:new BMap.Size(130,23),
        //切換城市之間事件
        onChangeBefore: function(){
           alert('before');
        },
        //切換城市之后事件
        onChangeAfter:function(){
          alert('after');
        }
    }));
},
addLine(map){
    //添加曲線
    var beijingPosition=new BMap.Point(116.432045,39.910683),
    hangzhouPosition=new BMap.Point(120.129721,30.314429),
    taiwanPosition=new BMap.Point(121.491121,25.127053);
    var point = [beijingPosition,hangzhouPosition,taiwanPosition];

    var curve = new BMapLib.CurveLine(point, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});//創(chuàng)建弧線
    map.addOverlay(curve);//添加到地圖上
    curve.enableEditing();//開啟編輯功能
},
addCustControl(map){
    //創(chuàng)建自定義放大縮小懸浮控件
    function ZoomControl() {
    //默認(rèn)停靠位置和偏移量
    this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
    this.defaultOffset = new BMap.Size(50,23);
    }
    //通過JavaScript的prototype屬性繼承于BMap.Control
    ZoomControl.prototype = new BMap.Control();
    //自定義控件必須實(shí)現(xiàn)自己的initialize方法，并且將控件的DOM元素返回
    //在本方法中創(chuàng)建div容器，并將其添加到地圖容器中
    ZoomControl.prototype.initialize = function(map) {
        //創(chuàng)建一個(gè)DOM元素
        var div = document.createElement('div');
        //添加文字說明
        div.appendChild(document.createTextNode('放大兩級'));
        //添加樣式
        div.style.color = '#40C5CC'; 
        div.style.cursor = 'pointer';
        div.style.border = '3px solid gray';
        div.style.backgroundColor = '#eee';
        //綁定事件，點(diǎn)擊觸發(fā)
        div.onclick = function(e) {
            map.setZoom(map.getZoom() + 2);
        }
        //添加DOM元素到地圖上
        map.getContainer().appendChild(div);
        //將DOM元素返回
        return div;
    }
    //創(chuàng)建控件
    var myZoomCtrl = new ZoomControl();
    map.addControl(myZoomCtrl)
},
addLoad(map){
    //實(shí)時(shí)路況
    var ctrl = new BMapLib.TrafficControl({
        showPanel: true //是否顯示路況提示面板
    });      
    map.addControl(ctrl);
    ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);  
},

mounted方法中初始化各功能部件
// 百度地圖API功能
    // 創(chuàng)建Map實(shí)例
    const _self= this;
    var map = new BMap.Map("XSDFXPage",{enableMapClick:true});
    // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級別
    map.centerAndZoom(new BMap.Point(120.018874,29.48683), 9);
    // 添加地圖類型控件
    // map.addControl(new BMap.MapTypeControl());  
    // 設(shè)置地圖顯示的城市 此項(xiàng)是必須設(shè)置的
    map.setCurrentCity("浦江");    
    // 開啟鼠標(biāo)滾輪縮放      
    map.enableScrollWheelZoom(true);
    // 設(shè)置定時(shí)器，對地圖進(jìn)行自動(dòng)移動(dòng)
    // this.mapMoveSelf
    /************************************************
    添加折線
    *************************************************/
    var pointGZ = new BMap.Point(119.923671,29.514494);
    var pointHK = new BMap.Point(110.35,20.02);
    setTimeout(function(){
        var polyline = new BMap.Polyline(
              [pointGZ,pointHK],
              {strokeColor:"blue",strokeWeight:5,strokeOpacity:0.5}
          );
         map.addOverlay(polyline);
     },6000);
    _self.addLoad(map);
     _self.addControl(map);
    _self.addLocaPosition(map);
    /************************************************
    添加自定義控件類，放大ZoomControl
    *************************************************/

    /************************************************
    添加添加城市列表控件
    *************************************************/
     _self.addControlCityList(map);
    /************************************************
    添加新圖標(biāo)
    *************************************************/
     _self.addIcon(map);
    /************************************************
    添加曲線
    *************************************************/

    /************************************************
    給地圖添加右鍵菜單
    *************************************************/
    _self.addMenu(map);

實(shí)用工具網(wǎng)站
百度地圖·JavaScript
百度地圖坐標(biāo)拾取
百度地圖API