Vue中使用百度地图

安装

npm

$ npm install vue-baidu-map --save
1

cdn

<script src="https://unpkg.com/vue-baidu-map"></script>
1

在vue中引入百度地图

需要在main.js里全局注册
ak 需要在 百度地图开放平台 获取

• 在main.js里写如下代码

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥
  ak: 'YOUR_APP_KEY'
})
1
2
3
4
5
6
7

在组件中调用

<template>
	<div class="about">
		<h1>百度地图简单的页面渲染h1>
		<div id="container">div>
	div>
template>
<style>
	#container {
		width: 800px;
		height: 600px;
	}
style>
<script>
	export default {
		data(){
			return {
				map:null,
			}
		},
		mounted() {
			this.initMap();
			this.map.addEventListener("click",e=>{
			//这里要使用 window.BMapGL 不然会报错
				var p = new window.BMapGL.Point(e.latlng.lng,e.latlng.lat);
				// 创建一个标注
				var m = new window.BMapGL.Marker(p);
				// 放入到地图中
				this.map.addOverlay(m);  
			})
		},
		methods: {
			initMap() {
				// 新建一个百度地图的实例
				this.map = new window.BMapGL.Map("container");
				// 创建地图点(地图中心位置)
				var point = new window.BMapGL.Point(116.404, 39.915);
				// 设置地图的中心,和缩放级别
				this.map.centerAndZoom(point, 15);
				this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
			}
		}
	}
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

效果

vue百度地图更多使用详见

https://dafrok.github.io/vue-baidu-map/#/zh/start/usage