详解Vue 如何使用最新3.0版本百度地图

准备流程：
注册百度账号——申请成为百度开发者——获取服务密钥（ak）——使用相关服务功能

使用流程：

1、安装

npm install vue-baidu-map --save

2、在index.html页面引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

3、使用

<template>
  <div class="baidumap" id="allmap"></div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    };
  },
  methods: {
    
    
    baiduMap() {
    
    
      var map = new BMap.Map("allmap");//创建地图实例

      var point = new BMap.Point(116.404, 39.915); // 创建点坐标
      map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      map.addControl(new BMap.NavigationControl());//添加导航控件
      map.addControl(new BMap.ScaleControl());// 添加比例尺控件
      map.addControl(new BMap.OverviewMapControl());//添加地图缩略图
      map.addControl(new BMap.MapTypeControl());//添加地图类型
      //map.setMapStyle({ style: 'midnight' }) //地图风格

      var marker = new BMap.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中

      //提示信息
      var infoWindow = new BMap.InfoWindow("这是提示信息");
      // 鼠标移上标注点要发生的事
      marker.addEventListener("mouseover", function () {
    
    
        this.openInfoWindow(infoWindow);
      });

      // 鼠标移开标注点要发生的事
      marker.addEventListener("mouseout", function () {
    
    
        this.closeInfoWindow(infoWindow);
      });
    },
  },
  mounted() {
    
    
    this.baiduMap();
  },
};


<style>
.baidumap {
    
    
  width: 1000px;
  height: 500px;
  border: 1px solid red;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
    
    
  display: none !important;
}
.BMap_noprint{
    
    
  display: block !important;
}
.anchorBL{
    
    
  display: none;
}
// 去除百度地图左下角比例尺
.BMap_scaleCtrl{
    
    
  display: none !important;
}
</style>

更详细的功能可看官方文档，也可以借鉴我前面几篇博客介绍的功能点实现