Vue集成百度地图

目录

打开百度地图的控制台 登录百度账号 这个网站。

打开 index.html，加上百度地图api的脚本

新建一个Map.vue

然后在  script 里面，你需要对百度地图的容器进行初始化。

---

 

打开百度地图的控制台 登录百度账号这个网站。

然后登录进去，创建自己的应用，你会得到一个ak。注意：你创建的是一个浏览器的应用。

 

打开 index.html，加上百度地图api的脚本

注意这个脚本后面带了 ak，这个ak就是上一步你申请的ak，你需要填写你自己的ak。

 

新建一个Map.vue

它的内容非常简单，就是一个 div 作为百度地图显示的容器，你可以通过 style 来控制它的宽高，我这里是主体的全屏。

 

然后在  script 里面，你需要对百度地图的容器进行初始化。

设置中心点，我这里做了一个定位的设置。

let map;
export default {
  name: "Map",
  data() {
    return {
    }
  },
  mounted() {
    // 百度地图API功能
    map = new BMap.Map('container'); // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
   // 开启定位
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
      if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        // alert('您的位置：'+r.point.lng+','+r.point.lat);
      }
      else {
        // alert('failed'+this.getStatus());
      }
    });
  }
}