开发Vue项目之导入百度地图篇

开发Vue项目之导入百度地图篇

我最近学习Vue.js 的时候，开发一个旅游网站的时候需要用到地图来作为每个城市做导航，所以就临时起意写下了这篇文章。里面的内容全部都是在重如何申请百度开发者到完成地图使用进行一一的步骤接

1. 第一步：

我们首先需要去百度地图开发者平台申请AK（秘钥）添加链接描述
点击链接注册登陆账号

选择开发文档
到了这里你就可以选择开发者指南下的账号和获取密钥，看左边使用方法一步一步来
完成创建项目就可以获得密钥了方框那里是可以写入限制访问域名的栏目
完成了注册应用， 点击查看应用就可以看到你申请的密钥了

到了这里你就完成了百度地图AK 的获取工作了

2. 第二步：
   在完成了密钥获取之后就可以在vue项目中使用百度地图了
   在你的项目环境里下载 vue-baidu-map 插件
   

   在项目的index.js 中导入插件

在webpack.base.conf.js配置文件中配置BMap，在module.exports 中与entry平级；如果还有其他的，同样在下面引入就可以了，比 如自定义覆盖物BMap_Symbol_SHAPE_POINT等。 (需要重新 npm run dev才可以)

module.exports = {
entry: {
app: ‘./src/main.js’
},
externals: {
‘BMap’: ‘BMap’,
‘BMap_Symbol_SHAPE_POINT’: ‘BMap_Symbol_SHAPE_POINT’
},

在重新 npm run dev 之后 就开始编写使用地图的组件了，下面是组件代码

<template>
	<div id="map">
		地图如下：
			<div class="baiduMap" id="allmap" ref="allmap"></div>
	</div>
</template>

<script>
export default {
	name: 'Map',
	mounted () {
		this.baiduMap();
	},
	methods: {
		baiduMap () {
			let map =new BMap.Map(this.$refs.allmap); // 创建Map实例
			map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);// 初始化地图,设置中心点坐标和地图级别
			map.addControl(new BMap.MapTypeControl({//添加地图类型控件
				mapTypes:[
					BMAP_NORMAL_MAP,
					BMAP_HYBRID_MAP
				]}));
			map.setCurrentCity("北京");// 设置地图显示的城市 此项是必须设置的
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
	
		}
	}
}
</script>

<style lang="stylus" scoped>
	.baiduMap {
		width: 3rem
		height: 3rem
		overflow: hidden
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;

	}
</style>

好了这里就是完成了百度地图的AK申请到完成地图使用的全部过程，希望能对你有帮助。