Vue中使用百度地图

proud1212

已于 2022-08-20 17:53:40 修改

阅读量1.6k

点赞数 7

文章标签： vue.js 百度 javascript

于 2022-08-20 17:49:31 首次发布

本文链接：https://blog.csdn.net/weixin_44309299/article/details/126440799

版权

安装

npm

$ npm install vue-baidu-map --save

cdn

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

在vue中引入百度地图

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

在这里插入图片描述

在main.js里写如下代码

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

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

在组件中调用

<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>