vue2中使用百度地图BMapGL

1、npm 命令安装

npm install vue-bmap-gl --save

2、main.js 中文件引入

import VueBMap from 'vue-bmap-gl'
import 'vue-bmap-gl/dist/style.css'
VueBMap.initBMapApiLoader({
	// 百度的key
	ak:'*********',// 这个密钥请使用自己注册的
})
Vue.use(VueBMap)

3、页面调用

<template>
        <div id="container" /></div>
</template>
        
import { lazyBMapApiLoaderInstance } from 'vue-bmap-gl'
<script>
export default {
	data() {
	        return {
	        	map:null
	        }
	},
	mounted() {
        this.initMap();
    },
    methods: {
	    initMap() {
			let that = this;
	      	lazyBMapApiLoaderInstance.load().then(() => {
	              that.map = new BMapGL.Map("container", {
	                  restrictCenter: false,
	              });
	        })
	 	}
    }
}

 </script>
                               

5 、寄语

往事不可追,那些曾经的遗憾,错过了就放下吧;
那些强求不来的,就让它随风而去吧。
重要的是,专注眼前,活好当下。

我们不能预测未来,但可以决定以什么样的状态来迎接未来。
珍惜自己当下拥有的幸福,带着这份感恩与知足,才能创造更多的幸福。

vue2中使用百度地图BMapGL_第1张图片

你可能感兴趣的:(javascript,vue.js,前端框架)