前端框架Vue（6）——如何在 vue 中內嵌百度地圖

  百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口，可幫助您在網站中構建功能豐富、交互性強的地圖應用，支持PC端和移動端基於瀏覽器的地圖應用開發，且支持HTML5特性的地圖開發。

  該套API免費對外開放。自v1.5版本起，您需先申請密鑰（ak）纔可以使用，接口無使用次數限制。

  地址傳送門：http://lbsyun.baidu.com/index...

  文章說是欄目是前端框架Vue結合百度地圖，這邊仍是主講一下如何引入地圖，以及部分 API 的使用。

一、申請密鑰

百度地圖的使用須要一個專屬的密鑰（ak）做爲路徑：

<script src='http://api.map.baidu.com/api?v=2.0&ak=你的密鑰&callback=init'></script>

按步驟完成，而且激活就能得到一個密鑰了，這樣咱們就能夠開始引入地圖了。

先來看效果圖：

總體項目是用Vue作的，百度地圖是其中的一個功能模塊，這邊瞭解一下如何將地圖引入到Vue項目中：

一、首先我用的是vue-cli腳手架,這是目錄結構：

如今在 index.html 中引入script:

script src='http://api.map.baidu.com/api?v=2.0&ak=你的密鑰&callback=init'></script>

解釋一下：v = 2.0是版本，ak 則是申請到的密鑰，callback 回調初始化地圖。

二、給定容器，調用 API 繪圖

<template>
    <!--地圖容器-->
    <div id="XSDFXPage" class="XSDFXPage"></div>
</template>
<script>
    export default {
        name:'',
        data () {
            return {
                
            }
        },
        mounted() {
            // 百度地圖API功能
            // 建立Map實例
            var map = new BMap.Map("XSDFXPage",{enableMapClick:true});
            // 初始化地圖,設置中心點座標和地圖級別
            map.centerAndZoom(new BMap.Point(116.4035,39.915), 11);
            // 添加地圖類型控件
            map.addControl(new BMap.MapTypeControl());  
            // 設置地圖顯示的城市 此項是必須設置的
            map.setCurrentCity("杭州");    
            // 開啓鼠標滾輪縮放      
            map.enableScrollWheelZoom(true);
            // 設置定時器，對地圖進行自動移動
            setTimeout(function(){
                map.panTo(new BMap.Point(113.262232,23.154345));
            }, 2000);
            setTimeout(function(){
                map.setZoom(14);
            },4000);
            /************************************************
            添加折線
            *************************************************/
            var pointGZ = new BMap.Point(113.262232,23.154345);
            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);
            /************************************************
            添加工具條、比例尺控件
            *************************************************/
            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}));
            /************************************************
            添加自定義控件類，放大ZoomControl
            *************************************************/
            function ZoomControl() {
                //默認停靠位置和偏移量
                this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
                this.defaultOffset = new BMap.Size(50,23);
            }
            //經過JavaScript的prototype屬性繼承於BMap.Control
            ZoomControl.prototype = new BMap.Control();
            //自定義控件必須實現本身的initialize方法，而且將控件的DOM元素返回
            //在本方法中建立div容器，並將其添加到地圖容器中
            ZoomControl.prototype.initialize = function(map) {
                //建立一個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';
                //綁定事件，點擊觸發
                div.onclick = function(e) {
                    map.setZoom(map.getZoom() + 2);
                }
                //添加DOM元素到地圖上
                map.getContainer().appendChild(div);
                //將DOM元素返回
                return div;
            }
            //建立控件
            var myZoomCtrl = new ZoomControl();
            map.addControl(myZoomCtrl)

            /************************************************
            添加添加城市列表控件
            *************************************************/
            map.addControl(new BMap.CityListControl({
                anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
                offset:new BMap.Size(130,23)
                // 切換城市之間事件
                // onChangeBefore: function(){
                //    alert('before');
                // },
                // 切換城市以後事件
                // onChangeAfter:function(){
                //   alert('after');
                // }
            }));
            /************************************************
            添加新圖標
            *************************************************/
            //定義新圖標
            var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif",new BMap.Size(300,157));
            //建立標註
            var marker = new BMap.Marker(pointHK,{icon:myIcon});
            var marker1 = new BMap.Marker(pointGZ,{icon:myIcon});
            //將標註放大地圖上
            map.addOverlay(marker);
            map.addOverlay(marker1);
            //文字提示
            var label = new BMap.Label('廣州西站',{offset:new BMap.Size(140,10)});
            marker1.setLabel(label); 
            //添加新圖標的監聽事件
            marker1.addEventListener('click',function(){
                var p = marker1.getPosition();//獲取位置
                alert("點擊的位置是：" + p.lng + ',' + p.lat);
            })

            /************************************************
            添加曲線
            *************************************************/
            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});//建立弧線
            map.addOverlay(curve);//添加到地圖上
            curve.enableEditing();//開啓編輯功能

            /************************************************
            給地圖添加右鍵菜單
            *************************************************/
            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);
        }
    }
</script>
<style scoped>
    html,body,.XSDFXPage{
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微軟雅黑";
        }
</style>

上面的代碼是能夠直接用的，也徹底能夠對照着百度地圖給出的文檔進行實踐。

將全部的操做放到 mounted 中，保證掛載完成後再去初始化地圖。

這篇文章主要是爲了往後本身用到地圖能夠直接來查，實在想不出其餘寫的目的了。
總結一下：

一、vue 結合百度地圖如何引入。
二、操做暫時寫在 mounted 中。
三、須要申請一個密鑰，並在使用時引入 script 中。