- 百度地圖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功能
//全局創建Map實例
let map = new BMap.Map('Bmap');     
//全局創建坐標對象
let point;   
//全局標注對象                       
let marker;                         
//標注的新圖標
let icon = new BMap.Icon("自定義圖片地址", new BMap.Size(標注寬,高),{
    imageSize : new BMap.Size(標注圖片寬,高)
})
//標注點擊后修改的新圖標
let newicon = new BMap.Icon("自定義圖片地址", new BMap.Size(標注寬,高),{
    imageSize : new BMap.Size(標注圖片寬,高)
})
export default {
  name: 'Bmap',
  methods: {
     track () {
        point = new BMap.Point(116.404, 39.915);
        // 初始化地圖,設置中心點坐標和地圖級別
        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);  
        //開啟鼠標滾輪縮放
        map.enableScrollWheelZoom(true);   

        // 將地址解析結果顯示在地圖上,并調整地圖視野
        myGeo.getPoint("北京市海淀區上地10街", function(point){
           if (point) {
               // 將標注添加到地圖中
               map.addOverlay(new BMap.Marker(point));    

               //創建標注對象,并修改marker的新圖標
               marker = new BMap.Marker(point,{icon: icon});
               //給標注物注冊事件
               marker.addEventListener("click",attribute(point));
            }else{
               alert("您選擇地址沒有解析到結果!");
            }
        }, "北京市");
     },
     //標注物注冊事件
     attribute (e){
         //獲取marker的位置
         alert("marker的位置是" + e.lng + "," + e.lat);

         //設置marker樣式
         marker.setIcon(newicon)

         //設置marker跳動的動畫    
         marker.setAnimation(BMAP_ANIMATION_BOUNCE);
     }
  }
}
</script>

未點擊標注前的地圖展示效果

Paste_Image.png

點擊標注后的地圖展示效果

Paste_Image.png

- 相關文檔說明書

百度地圖概述
百度地圖DEMO
百度地圖API 類參考