1、申請(qǐng)密鑰
百度地圖的使用需要一個(gè)專(zhuān)屬的密鑰（ak）作為路徑：
<script src='http://api.map.baidu.com/api?v=2.0&ak=你的密鑰&callback=init'></script>
image
按步驟完成惭每，并且激活就能獲得一個(gè)密鑰了骨饿，這樣我們就可以開(kāi)始引入地圖了。先來(lái)看效果圖：
image
整體項(xiàng)目是用Vue做的台腥，百度地圖是其中的一個(gè)功能模塊宏赘，這邊了解一下如何將地圖引入到Vue項(xiàng)目中：
1、首先我用的是vue-cli腳手架,這是目錄結(jié)構(gòu)：
image
現(xiàn)在在 index.html 中引入script:
<script src='http://api.map.baidu.com/api?v=2.0&ak=你的密鑰&callback=init'></script>
解釋一下：v = 2.0是版本黎侈，ak 則是申請(qǐng)到的密鑰察署，callback 回調(diào)初始化地圖。
2峻汉、給定容器贴汪，調(diào)用 API 繪圖
<template>
<!--地圖容器-->
<div id="XSDFXPage" class="XSDFXPage"></div>
</template>
<script>
export default {
name:'',
data () {
return {
}
},
mounted() {
// 百度地圖API功能
// 創(chuàng)建Map實(shí)例
var map = new BMap.Map("XSDFXPage",{enableMapClick:true});
// 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
map.centerAndZoom(new BMap.Point(116.4035,39.915), 11);
// 添加地圖類(lèi)型控件
map.addControl(new BMap.MapTypeControl());
// 設(shè)置地圖顯示的城市 此項(xiàng)是必須設(shè)置的
map.setCurrentCity("杭州");
// 開(kāi)啟鼠標(biāo)滾輪縮放
map.enableScrollWheelZoom(true);
// 設(shè)置定時(shí)器，對(duì)地圖進(jìn)行自動(dòng)移動(dòng)
setTimeout(function(){
map.panTo(new BMap.Point(113.262232,23.154345));
}, 2000);
setTimeout(function(){
map.setZoom(14);
},4000);
/************************************************
添加折線(xiàn)
*************************************************/
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}));
/************************************************
添加自定義控件類(lèi)扳埂，放大ZoomControl
*************************************************/
function ZoomControl() {
//默認(rèn)停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
this.defaultOffset = new BMap.Size(50,23);
}
//通過(guò)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');
//添加文字說(shuō)明
div.appendChild(document.createTextNode('放大兩級(jí)'));
//添加樣式
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)
/************************************************
添加添加城市列表控件
*************************************************/
map.addControl(new BMap.CityListControl({
anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
offset:new BMap.Size(130,23)
// 切換城市之間事件
// onChangeBefore: function(){
// alert('before');
// },
// 切換城市之后事件
// onChangeAfter:function(){
// alert('after');
// }
}));
/************************************************
添加新圖標(biāo)
*************************************************/
//定義新圖標(biāo)
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif",new BMap.Size(300,157));
//創(chuàng)建標(biāo)注
var marker = new BMap.Marker(pointHK,{icon:myIcon});
var marker1 = new BMap.Marker(pointGZ,{icon:myIcon});
//將標(biāo)注放大地圖上
map.addOverlay(marker);
map.addOverlay(marker1);
//文字提示
var label = new BMap.Label('廣州西站',{offset:new BMap.Size(140,10)});
marker1.setLabel(label);
//添加新圖標(biāo)的監(jiān)聽(tīng)事件
marker1.addEventListener('click',function(){
var p = marker1.getPosition();//獲取位置
alert("點(diǎn)擊的位置是：" + p.lng + ',' + p.lat);
})
/************************************************
添加曲線(xiàn)
*************************************************/
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)建弧線(xiàn)
map.addOverlay(curve);//添加到地圖上
curve.enableEditing();//開(kāi)啟編輯功能
/************************************************
給地圖添加右鍵菜單
*************************************************/
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>
