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./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>
