1, the preface

Record the simple use of Baidu Map API in Vue2 project.

2. Apply for an account and obtain the key

Need to apply for baidu account, then log in baidu map open platform: https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey, according to the process, apply to be a developer, and then create the application.

The application type is browser-side, and the Referer whitelist is *

3. Install dependencies

npm i --save vue-baidu-map
Copy the code

4. Global introduction usage

It’s first introduced in main.js

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, { ak: 'Your application key' })
Copy the code

And then in your.vue file

<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 = 121.487899486
			this.center.lat = 31.24916171
			this.zoom = 15}}}</script>

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

Now you can see Shanghai on the page if there is no problem

5. Local introduction of usage

It’s in your.vue file

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

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

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

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

6. Common parameter description & documentation

attribute

The property name type The default value describe
ak String There is no Baidu map developer platform for the application of the key, only in the local registration component declaration
center Point, String There is no Location. You can use the region string, such as “Haizhu District, Guangzhou City”, or use the longitude and latitude object, such as {LNG: 116.404, LAT: 39.915}
zoom Number There is no Zoom level
min-zoom Number There is no Minimum scale level
max-zoom Number There is no Maximum scale level
map-click Boolean true Allows clicking this item to be loaded only once when the map component is mounted
dragging Boolean true Allowed to drag and drop
scroll-wheel-zoom Boolean true Allows mouse wheel zooming

The event

The event name parameter describe
click {type, target, point, pixel, overlay} This event is triggered when a map is left-clicked. When double-clicked, the sequence of events generated is: click click dblclick
dblclick {type, target, pixel, point} This event is triggered when you double-click a map
dragstart {type, target, pixel, point} Triggered when you start dragging the map
dragging {type, target, pixel, point} Triggered during map dragging
dragend {type, target, pixel, point} Triggered when stopping dragging maps
resize {type, target, size} This event is triggered when the size of the map’s viewable area changes
hotspotclick {type, target, spots} This event is triggered when a hot zone is clicked
hotspotover {type, target, spots} This event is triggered when the mouse moves over a hot area
hotspotout {type, target, spots} This event is triggered when the mouse moves out of a hot area
tilesloaded {type, target} This event is triggered when all blocks of a local graph have finished loading

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

If you think it is helpful, I am @pengduo, welcome to like and follow the comments; END

The articles

  • Use NVM to manage node.js version and change NPM Taobao image source
  • Enumerative JS practical and powerful operator & operator
  • Wechat small program to achieve search keyword highlighting
  • Request encapsulation of wechat applets
  • The use of try and catch in javaScript and breaking out of forEach loops

Personal home page

  • CSDN
  • GitHub
  • Jane’s book
  • Blog garden
  • The Denver nuggets