百度地图自定义marker、文本标注、信息窗口

最新推荐文章于 2023-09-11 16:02:27 发布

甜甜凉白开

最新推荐文章于 2023-09-11 16:02:27 发布

阅读量3.4k

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/qq_41877050/article/details/119206593

版权

getMap() {
		var carIcon = new BMap.Icon(
			require("@/assets/images/shouye/car.svg"),
			new BMap.Size(40, 40),
			{
				imageSize: new BMap.Size(28,28),
				imageOffset:new BMap.Size(0,0) 
	　　　　 }
		);
		var map = new BMap.Map("map_shishijiankong");
		var point = new BMap.Point(106.3, 33.92);
		map.centerAndZoom(point, 5);
		map.enableScrollWheelZoom(true);
		var marker = new BMap.Marker(point,{icon:carIcon});
		// 创建文本标注对象
		var labelopts = {
			position: point, // 指定文本标注所在的地理位置
			offset: new BMap.Size(5, -30) // 设置文本偏移量
		};
		var label = new BMap.Label('车辆001', labelopts);
		label.setStyle({ 
			color : "#fff", 
			fontSize : "14px", 
			backgroundColor :"0.05",
			backgroundColor:"#84C1FF",
			border :"0", 
			fontWeight :"bold" 
		});
        map.addOverlay(marker); 
		map.addOverlay(label); 
		marker.addEventListener("click", getdetail);
		function getdetail() {
			var opts = {
				width: 760,     // 信息窗口宽度
				height: 260,     // 信息窗口高度
				title : "车辆" , // 信息窗口标题
				message:"车辆信息"
			};
			var content = `<p>
				<i class="el-icon-truck"></i>&nbsp;车牌号:&nbsp;{{item.chepaihao}}
				<span style="float:right;padding-right:7%;font-size:18px">
					<i class="el-icon-star-on"></i>
				</span>
			</p>
			<p><i class="el-icon-s-custom"></i>&nbsp;所属客户:&nbsp;{{item.kehu}}</p>
			<p><i class="el-icon-date"></i>&nbsp;设备时间:&nbsp;{{item.shijian}}</p>
			<p><i class="el-icon-s-tools"></i>&nbsp;状态:&nbsp;{{item.zhuangtai}}</p>
			<p><i class="el-icon-location"></i>&nbsp;位置:&nbsp;{{item.weizhi}}</p>`
			var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象 
            map.openInfoWindow(infoWindow, point); //开启信息窗口
		}
    },

实现效果：