我在vue单独组件中引入百度地图api,以及使用mapvgl,解决在vue中引入百度地图api

1.创建map.js

export function Map(ak) {
  return new Promise(function (resolve, reject) {
    window.init = function () {
      resolve(BMapGL)
    }
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//api.map.baidu.com/api?v=2.0&type=webgl&ak=" + ak + "&callback=init";
    script.onerror = reject;
    document.head.appendChild(script);
  })
}

2.引入map.js
3.如果使用mapvgl

1.通过  npm i mapvgl  安装mapvgl,
2.然后在项目中通过const mapvgl = require('mapvgl') 引入

<script>
import { Map } from '@/utils/map.js'
const mapvgl = require('mapvgl')
export default {
    data() {
        return {
            obj: {
                name: 'jeck',
                age: 18
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.baiduMap()
        })
     
    },
    methods: {
        baiduMap: function () {
            //第一种方式引入 //此处Map('ak').then...请使用自己的ak秘钥
            Map("FjGqT56MftxXk3c5yIYGL&callback").then(BMapGL => {				//调用map.js中Map()方法，引入百度地图秘钥作为参数
                var map = new BMapGL.Map("container");          // 创建地图实例
                var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
                map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
                map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

                // 2. 创建MapVGL图层管理器
              //  console.log(map)
             
                var view = new mapvgl.View({
                    map: map
                });
                // 3. 创建可视化图层，并添加到图层管理器中
                var layer = new mapvgl.HeatPointLayer({
                    color: 'rgba(50, 50, 200, 1)',
                    shape: 'circle', // 默认为圆形，可传square改为正方形
                    blend: 'lighter',
                    size: 100,
                    gradient: {
                        0.0: 'rgb(50, 50, 256)',
                        0.1: 'rgb(50, 250, 56)',
                        0.5: 'rgb(250, 250, 56)',
                        1.0: 'rgb(250, 50, 56)'
                    },
                    data: []
                });
                var data = []
                for (let i = 0; i < 400; i++) {
                    data.push({
                        geometry: {
                            type: 'Point',
                            coordinates: [116.392394, 39.910683 + Math.random() * 4]
                        },
                        properties: {
                            count: 2
                        }
                    })
                }
                view.addLayer(layer);

        

                // 5. 关联图层与数据，享受震撼的可视化效果
                layer.setData(data);

            })
        }

    }

}
</script>