vue中如何添加百度地图及覆盖物小图片_百度地图覆盖图片大小-优快云博客

本文链接：https://blog.youkuaiyun.com/dell_wu_gao_jian/article/details/106161568

本文介绍了在Vue项目中如何实现百度地图的定位功能，并详细讲解了设置地图覆盖物的方法，包括在mounted阶段进行地图初始化，在methods中定义添加覆盖物的逻辑，同时也提到了滚轮缩放和添加地图控件的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.申请AK
	**http://lbsyun.baidu.com/apiconsole/key**
2、在vue项目的public文件夹下的index.html中引入脚本
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
3、$ npm install vue-baidu-map --save
4、在main.js中全局注册
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: '你申请的key'

})

定位

在这里插入图片描述

在mounted中定义：

```css
 mounted() {
		 var map = new BMap.Map("allmap");		//定义地图实例
		var point = new BMap.Point(116.331398,39.897445); //定义当前坐标
		var self=this
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r){
			if(this.getStatus() == BMAP_STATUS_SUCCESS){
				point = new BMap.Point(r.point.lng, r.point.lat) //获取最新坐标
			}
			else {
				alert('failed'+this.getStatus());
			} 
			map.centerAndZoom(point,12);	//中心点和其放大倍数
			self.addMarker(map,point)	//将图片放在地图上指定点
		},{enableHighAccuracy: true})
	}

设置覆盖物

在这里插入图片描述在methods中定义：

methods: {
		addMarker (map, point) {  // 创建图标对象   
		var myIcon = new BMap.Icon("marker.png", new BMap.Size(23, 25), {  // 定义覆盖物大小
		anchor: new BMap.Size(10, 25),   
	})  
		var marker = new BMap.Marker(point,{icon: myIcon});	
		map.addOverlay(marker)//添加覆盖物
		}
		marker.setAnimation(BMAP_ANIMATION_BOUNCE)//覆盖物的跳动
	},

6、滚轮缩放

开启鼠标滚轮缩放
地图的鼠标滚轮缩放默认是关闭的，需要配置开启。

map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

7、向地图添加控件

map.addControl(new BMap.NavigationControl());   //平移缩放控件 
map.addControl(new BMap.ScaleControl());    //比例尺
map.addControl(new BMap.OverviewMapControl());  //缩略地图  
map.addControl(new BMap.MapTypeControl()); //地图类型   
map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用