vue+百度地图

vue+ 百度地图+ django

1.安装百度地图api
npm install vue-baidu-map –save
2.在index.html中引入：

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

注意getscript要不是会警告
3.在build/webpack.base.conf.js配置文件中配置BMap，在module.exports 中与entry平级

module.exports = {
	context: path.resolve(__dirname, '../'),
	entry: {
		app: './src/main.js'
	},
	externals: {
		'BMap': 'BMap',
		'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT',
		
	},

4.重新启动vue项目 npm run dev
5.组件中创建一个容器
map.vue 中

<div id="mapBaidu">
</div>

必须要设置#mapBaidu的宽高，否则地图会显示不出来

<script>
export default {
		name: 'map',
		data() {
			return {
			}
		},
		methods: {
			baiduMap(){
				var map = new BMap.Map('mapBaidu')
				map.centerAndZoom('南昌', 11)
				map.enableScrollWheelZoom(true);
			}
		}，
		mounted(){
			this.baiduMap();
		}
		
}
<script/>

大功告成，具体想给地图添加样式什么的直接写在baiduMap()方法里面，参考百度地图api

百度地图api