创建并修改标注（VUE下的百度地图）

- 百度地图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 类参考