- 百度地圖API引用
index.html需要先引用API
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
- 地圖組件中HTML部分
<div id="Bmap"></div>
- STYLE在JS中data里定義，并在html使用定義好的樣式
style:
data() {
return {
MapStyle: { //地圖樣式
width: '100%',
height: '100%',
}
}
}
html: <div id="Bmap" :style="MapStyle"></div>
- 地圖組件中JS部分
<script>
// 百度地圖API功能
//全局創(chuàng)建Map實(shí)例
let map = new BMap.Map('Bmap');
//全局創(chuàng)建坐標(biāo)對(duì)象
let point;
//全局標(biāo)注對(duì)象
let marker;
//標(biāo)注的新圖標(biāo)
let icon = new BMap.Icon("自定義圖片地址", new BMap.Size(標(biāo)注寬,高),{
imageSize : new BMap.Size(標(biāo)注圖片寬,高)
})
//標(biāo)注點(diǎn)擊后修改的新圖標(biāo)
let newicon = new BMap.Icon("自定義圖片地址", new BMap.Size(標(biāo)注寬,高),{
imageSize : new BMap.Size(標(biāo)注圖片寬,高)
})
export default {
name: 'Bmap',
methods: {
track () {
point = new BMap.Point(116.404, 39.915);
// 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
map.centerAndZoom(point,12);
//右上角秩命，僅包含平移和縮放按鈕
let top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
//添加地圖類型控件
map.addControl(top_right_navigation);
//開啟鼠標(biāo)滾輪縮放
map.enableScrollWheelZoom(true);
// 將地址解析結(jié)果顯示在地圖上,并調(diào)整地圖視野
myGeo.getPoint("北京市海淀區(qū)上地10街", function(point){
if (point) {
// 將標(biāo)注添加到地圖中
map.addOverlay(new BMap.Marker(point));
//創(chuàng)建標(biāo)注對(duì)象,并修改marker的新圖標(biāo)
marker = new BMap.Marker(point,{icon: icon});
//給標(biāo)注物注冊(cè)事件
marker.addEventListener("click",attribute(point));
}else{
alert("您選擇地址沒(méi)有解析到結(jié)果!");
}
}, "北京市");
},
//標(biāo)注物注冊(cè)事件
attribute (e){
//獲取marker的位置
alert("marker的位置是" + e.lng + "," + e.lat);
//設(shè)置marker樣式
marker.setIcon(newicon)
//設(shè)置marker跳動(dòng)的動(dòng)畫
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
}
}
}
</script>
未點(diǎn)擊標(biāo)注前的地圖展示效果
Paste_Image.png
點(diǎn)擊標(biāo)注后的地圖展示效果
Paste_Image.png
