VUE 使用百度地图api

1、在index文件中引入JS

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

2、在vue.config.js中配置

module.exports = {
    configureWebpack: {
        externals: {
          "BMap": "BMap"
        }
    }
};

3、在页面中使用

<template>
  <div class="all">
    <div id="allmap" classs="allmap"></div>
  </div>
</template>

<script>
import BMap from 'BMap'
export default {
  data () {
    return {
    }
  },
  methods: {
    createMap(){
      var that = this;
      var map = new BMap.Map("allmap");
      var point = new BMap.Point(116.331398,39.897445);
      map.centerAndZoom(point,12);
  },
  mounted () {
    this.createMap()
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;

}
#allmap{
  width: 100%;
  height: 100%;
}
</style>