地图的移动轨迹

		<!-- 移动轨迹 -->
			<TabPane label="移动轨迹" name="name2">
				<div id="allmapp" style="width: 100%;height: 400px;"></div>
			</TabPane>
mounted() {

	// 移动轨迹
	this.mapa = new BMap.Map("allmapp");
		this.mapa.enableScrollWheelZoom(true);		 //地图可缩放
	      let pointy = new BMap.Point(113.23, 23.16);//地图默认中心点
			this.mapa.centerAndZoom(pointy, 9);
			let stylew={
				features: ["road","building","water","land"],
				style : 'midnight',
          };
          this.mapa.setMapStyle(stylew);			
	},
//  移动轨迹
	deviceService.deviceTraceList({deviceId:Id}).then(rs => {			
		that.mapDataa=rs.data;
		let centerpoint = new BMap.Point(that.mapDataa.length>0 ? that.mapDataa[0].longitude : 104, that.mapDataa.length>0 ? that.mapDataa[0].latitude : 35);//地图默认中心点
		that.mapa.centerAndZoom(centerpoint,that.mapDataa.length>0 ? 10 : 5);

		// 编写自定义函数,创建标注
		function addMarker(point,labell){
			let marker = new BMap.Marker(point);
			marker.setLabel(labell);

			let windowOption = {
				width:200
			}

			that.mapa.addOverlay(marker);
			marker.addEventListener("click",function () {
				let po = marker.getPosition();
				let tipData={};
				let infoWindow = '';
				for(let i=0; i<that.mapDataa.length;i++){
					if(po.lng==that.mapDataa[i].longitude){
						tipData=that.mapDataa[i]
					}
				}
				infoWindow = new BMap.InfoWindow('<p>'+tipData.address+'</p><p>'+tipData.warnTime+'</p>',windowOption)
				that.mapa.openInfoWindow(infoWindow,po)
			})
		}

		// 添加标注		
		for (var i = 0; i < this.mapDataa.length; i ++) {
			let point = new BMap.Point(this.mapDataa[i].longitude, this.mapDataa[i].latitude);
			let labell = new BMap.Label(i+1, {
				offset : new BMap.Size(5, 4)
			});
			labell.setStyle({
				background:'none',color:'#fff',border:'none'	//只要对label样式进行设置就可达到在标注图标上显示数字的效果
			});
			addMarker(point,labell);
		}					 											
	});
		this.mapa.clearOverlays();								// 清除第一次点击时留下的覆盖物,  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值