Vue-cli使用百度地图Api

1.申请百度地图ak：http://lbsyun.baidu.com/apiconsole/key#/home

点击创建应用：

2.在index.html里引入百度地图脚本

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

3.在地图组件map.vue里初始化地图

<template>
	<div class="map" id="container"></div>
</template>

<script>
	export default {
		name: '',

		data() {
			return {

			};
		},
		//加载地图
		mounted() {
			var map = new BMap.Map("container");// 创建地图实例
				var point = new BMap.Point(116.404, 39.915);// 创建点坐标 
				
				//定位：代码复制地址http://lbsyun.baidu.com/jsdemo.htm?a#i8_1
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r) {
					if (this.getStatus() == BMAP_STATUS_SUCCESS) {
						//获取经纬度
                        var mk = new BMap.Marker(r.point);
					    map.addOverlay(mk);
					    map.panTo(r.point);
						alert('您的位置：' + r.point.lng + ',' + r.point.lat);
						// 使用定位成功后的经纬度坐标
						point = new BMap.Point(r.point.lng, r.point.lat);
					} else {
						alert('failed' + this.getStatus());
					}
					// 初始化地图，设置中心点坐标和地图级别 
					map.centerAndZoom(point, 15);
				}, {enableHighAccuracy: true})
		}
		
	}
</script>

<style lang="css" scoped>
	#container{
		width: 100%;
		height: 500px;
	}
</style>

4.在App.vue中显示组件：

 <template>
  <div id="app">
	<router-view class="content"></router-view>
  </div>
</template>
<style>
#app {
  height: 500px;
  /* 弹性盒从上到下排列 */
  display: flex;
  flex-direction: column;
}
.content{
	/* 贴满剩余高度 */
	flex: 1;
}
</style>