vue中简单使用百度地图

<template>
  <div class="page_wrap">
    <div id="allmap" ref="allmap">

    </div>
  </div>
</template>
 
<script>
export default {
  name: 'Public-map',
  mounted(){
    this.map();
  },
  methods:{
    map(){
      let map =new BMap.Map(this.$refs.allmap); // 创建Map实例
      map.centerAndZoom(new BMap.Point(113.289917, 23.072839), 13);// 初始化地图,设置中心点坐标和地图级别
      map.setCurrentCity("广州");// 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      //设置标注的图标
      var icon = new BMap.Icon("../../../../static/picture/contact-us/location_icon.png",new BMap.Size(21,21));
      //设置标注的经纬度
      var marker = new BMap.Marker(new BMap.Point(113.289917,23.072839),{icon:icon});
      //把标注添加到地图上
      map.addOverlay(marker);
      var content = "<table>";

      //点击标记出现位置信息
      content = content + "<tr><td> 电话020-56253658</td></tr>";
      content = content + "<tr><td> 地点：广州全识文化科技有限公司</td></tr>";
      content += "</table>";
      var infowindow = new BMap.InfoWindow(content);
      marker.addEventListener("click",function(){
          this.openInfoWindow(infowindow);
      });
    }
 
  },
}


//vue项目中使用百度地图
//1.去“百度地图开发平台”获取秘钥----方法，百度地图开发平台界面-->控制台-->创建应用-->获得秘钥
//2.在vue项目的index.html中引入----<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥" ></script>
//3.如该组件所示
</script>
 
<style>
#allmap{
  width:656px;
  height: 307px; 
}
#allmap .BMap_mask{
  background-image:url("../../../../static/picture/contact-us/map_border.png");
  background-size:100% 100%; 
  /* background-image:radial-gradient(80% 80%,transparent 0%,transparent 50%,rgba(0,0,0,0.5) 80%,#fff 80%); */
}




/* 去掉地图默认的底部字体 */
.BMap_cpyCtrl {
    display:none;
}
/* 去掉地图默认的百度logo */
.anchorBL{
    display:none;
}
</style>