nuxt 引入vue-baidu-map/vue-amap 地图底图空白，看不到线路

前提：百度和高德地图都试过了，都是一片空白，但是点击元素可以显示地点详细信息样式。唯独底图瓦片不显示。

如果只是为了做展示用，不使用其他功能，可以直接引入原生百度地图

<template>
  <div id="map">
    <div  @click="init">查询</div>
<!--    <el-input class="input" v-model="place" @change="init"></el-input>-->
<!--    <el-button @click="init">查询</el-button>-->
    <!-- container容器，用来作为渲染百度地图的容器div -->
    <div id="container"></div>

  </div>
</template>

<script>
  export default {
// 组件命名
    name: 'baidu-map',
    layout:'noDefault',
    head:{
      script:[
        {
          src:'//api.map.baidu.com/api?type=webgl&v=1.0&ak="你的密钥"'
        },]
    },
  data() {
    return {
      place: ''
    }
  },
  created() {},
  mounted() {
    //组件初始化
    this.init()
  },
  methods: {
    init() {
      var map=new BMapGL.Map('container')
      map.centerAndZoom(new BMapGL.Point(116.404,39.234),12)
    }
  }
  }
</script>

<style lang="css" scoped>

  #map html {
    height: 100%;
  }
  #map body {
    height: 100%;
    margin: 0px;
    padding: 0px;
  }
  #map #container {
    height:500px;
  }
  #map {
    width: 100%;
    height: 580px;
  }
  #map .container {
    width: 800px;
    height: 800px;
  }
  #map .input {
    width: 400px;
  }
</style>