The method of using Baidu map API in Vue2.0

Ⅰ Login to Baidu Maps Open Platform

jspopularGL | Baidu Map API SDK (baidu.com)

Follow the process and apply to become a developer

ⅡAK key application 

Click Application Management - My Application in the console, pay attention to the application type when creating an application, select the browser side, and select the white list *

 Ⅲ Installation dependencies

npm i --save vue-baidu-map

Enter the above content in the terminal under the vue file to install dependencies

Ⅳ Global introduction

Introduced in the entry file main, js

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, { ak: '你申请的key' })

In the .vue file you need to import Baidu Maps

<template>
	<div id="index">
		<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" />
	</div>
</template>

<script>
export default {
	name: 'Index',
	components: {},
	data() {
		return {
			center: { lng: 0, lat: 0 },
			zoom: 0
		}
	},
	created() {},
	mounted() {},
	methods: {
		handler({ BMap, map }) {
			console.log(BMap, map)
			this.center.lng = 126.628654
			this.center.lat = 45.729319
			this.zoom = 15
		}
	}
}
</script>

<style lang="less" scoped>
.map{
	width: 500px;
	height: 500px;
}
</style>

ⅤChange the coordinate position

 

Pick up coordinate system (baidu.com)

Official document: https://dafrok.github.io/vue-baidu-map/#/zh/index