vue-baidu-map，vue百度地图

1、首先你得有百度开发者账号，然后再使用账号创建你要的应用列表，会生成一个sk码

百度地图首页地址（注册开发者账号，有的可以忽略）：http://lbsyun.baidu.com/

Vue百度地图API文档地址（百度地图控件、覆盖物）：https://dafrok.github.io/vue-baidu-map/#/zh/index

如果不添加控件，覆盖物，等等。地图就只有地图，没有任何操作功能。放大缩小，标点，定位，等待都需要自己添加。

 

2、使用npm安装百度地图输入：npm install vue-baidu-map –save

 

3、main.js中引入百度地图

import BaiduMap from'vue-baidu-map'//引入百度地图
Vue.use(BaiduMap,{ak:''})//使用百度地图。ak是百度开发者账号创建应用列表后生存

4、vue页面代码

<template>
    <div>
        <el-row>
           <baidu-map class="baiduMap" :center="center" :zoom="zoom" :scroll-wheel-zoom="true"></baidu-map>
        </el-row>
    </div>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				center: {
					lng: 104.072673,//经度
					lat: 30.57905,//纬度
					},  
				zoom: 15,//地图展示层级
			}
		},
		created: function() { //在模板渲染成html前调用。执行顺序:父组件-子组件

		},
		mounted() { //在模板渲染成html后调用。执行顺序:子组件-父组件

		},
		methods: {

			
		},
		watch: { //去监听一个值的变化，然后执行相对应的函数
			
		}
	}
</script>

<style>
	.baiduMap {
	  width: 100%;
	  height: 400px;
	}
</style>

*这就是没有加任何控件的百度地图。注释已经写的很清楚，每个属性的作用。另外scroll-wheel-zoom，表示支持放大缩小。这其实是控件属性，百度地图控件篇在下一篇文章：https://blog.csdn.net/qq_37346639/article/details/100104012