点击打开地图弹窗

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});
        map.addOverlay(marker); 
		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); //开启信息窗口
		}
    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值