记录一下vue项目引入百度地图

公共部分

 #allmap {

            width: 500px;

            height: 500px;

         

            font-family: "微软雅黑";

        }

1、 

  data() {

    return {

 // 定位位置

 center: {lng: 0, lat: 0},

    // 地图放大等级

      zoom: 3
}

}

 methods: {

      // 实例对象

      handler ({BMap, map}) {

      console.log(BMap, map)

      // 经度

      this.center.lng = 116.404

      // 纬度

      this.center.lat = 39.915

      // 地图放大等级

      this.zoom = 15

    }

}

2、index.html引入

 

 

 

 mounted () {

 var map = new BMap.Map('allmap');

map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);

}

3、单页面引入

 data() {

    return {

      ak:'0MGoqTzESLptR6j6LEmhlDey6ZO53yeZ',

      script:{type:'',src:''}

}

}

 mounted () {

    this.$nextTick(function() {

        var _this = this;

        MP(_this.ak).then(BMap => {

          // 百度地图API功能

          var map = new BMap.Map("allmap")

          map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);

        })

      })

}

import {MP} from '@/map.js'  

export function MP(ak) {  

    return new Promise(function (resolve, reject) {  

      window.onload = function () {  

        resolve(BMap)  

      }  

      var script = document.createElement("script");  

      script.type = "text/javascript";  

      script.src = "http://api.map.baidu.com/api?ak="+ak+"&callback=init";  

      script.onerror = reject;  

      document.head.appendChild(script);  

    })  

  }