|
|
@@ -0,0 +1,617 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div id="amap-container"></div>
|
|
|
+ <div class="controller">
|
|
|
+ <div class="in_transit_information">
|
|
|
+ <span class="item_details">车牌号:</span> <el-input style="width: 100px;" class="inputStyle" v-model="carNumber"> </el-input>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="in_transit_information2">
|
|
|
+ <span class="item_details">时间段:</span>
|
|
|
+ <el-date-picker
|
|
|
+ class="date_picker_style"
|
|
|
+ v-model="time"
|
|
|
+ @change="changeTime"
|
|
|
+ type="datetimerange"
|
|
|
+ format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ <el-button type="primary" class="searchstyle" @click="initData">查询</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="driving_information">
|
|
|
+ <span class="item_details">时间:{{runRoute.gtm}}</span>
|
|
|
+ <br/>
|
|
|
+ <span class="item_details">车速:{{runRoute.spd}}千米/小时</span>
|
|
|
+ <br/>
|
|
|
+ <!--控制条-->
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="map-control" v-show="isActual">
|
|
|
+ <!--播放暂停按钮-->
|
|
|
+ 进度:
|
|
|
+ <Icon v-if="!isPlay" class="play-icon play" type="ios-play" @click="isPlay=true;play();navgControl(playIcon)"/>
|
|
|
+ <Icon v-else class="play-icon pause" type="ios-pause" @click="isPlay=false;stop();navgControl('pause')"/>
|
|
|
+ <Icon class="play-icon quickly" type="ios-play" @click="addIndex()"/>
|
|
|
+ <div class="mySlider"><Slider class="map-slider" v-model="sliderVal" :tip-format="hideFormat" :step="0.0001"></Slider></div>
|
|
|
+
|
|
|
+ <!--播放暂停按钮-->
|
|
|
+
|
|
|
+ <!-- <Icon class="play-icon quickly" type="ios-play" @click="addIndexSpeed()"/> -->
|
|
|
+ <!-- <Slider class="map-slider" v-model="speedVal" :tip-format="speedFormat" :step="0.0001"></Slider> -->
|
|
|
+ <div class="mySlider2"><el-slider
|
|
|
+ v-model="speedVal"
|
|
|
+ show-input>
|
|
|
+ </el-slider></div>
|
|
|
+ </div>
|
|
|
+ <div class="map-control" v-show="isActual">
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
+import { shallowRef } from '@vue/reactivity'
|
|
|
+import { sjTime } from "@/utils/sharedJsFile";
|
|
|
+import { Loading } from 'element-ui';
|
|
|
+import { lazyAMapApiLoaderInstance } from 'vue-amap';
|
|
|
+import Slider from './slider.vue'
|
|
|
+Vue.use(Slider)
|
|
|
+import AMapJS from "amap-js";
|
|
|
+import Vue from 'vue';
|
|
|
+export default {
|
|
|
+ name: "PathView",
|
|
|
+
|
|
|
+ setup(){
|
|
|
+ const map = shallowRef(null);
|
|
|
+ return{
|
|
|
+ map,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ speedVal:{
|
|
|
+ deep: true,
|
|
|
+ handler(val, oldVal) {
|
|
|
+ let that=this;
|
|
|
+ if(that.pathNavigator!=null){
|
|
|
+ that.pathNavigator.setSpeed(100*val)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ startTime:'',
|
|
|
+ endTime:'',
|
|
|
+ time:[],
|
|
|
+ carNumber:"",
|
|
|
+ orderNumber:'',
|
|
|
+ ///che
|
|
|
+ isTimesChoose:false,
|
|
|
+ isActual:true,
|
|
|
+ isPlay:true,
|
|
|
+ passedTime:"12:02:10",
|
|
|
+ sliderVal:0,
|
|
|
+ speedVal:10,
|
|
|
+ speed:1000,
|
|
|
+ times:1,
|
|
|
+
|
|
|
+ totalTime:"11",
|
|
|
+ speedList:["1倍数","2倍数","3倍数"],
|
|
|
+ //已行驶轨迹
|
|
|
+ runRoute:
|
|
|
+ {
|
|
|
+ agl: "44",
|
|
|
+ gtm: "2022年03月09日 16:47:24",
|
|
|
+ hgt: "13",
|
|
|
+ lat: "32.906411535084985",
|
|
|
+ lon: "115.76177868692135",
|
|
|
+ mil: "429409.2",
|
|
|
+ spd: "17.0"
|
|
|
+ },
|
|
|
+ point:"",
|
|
|
+ pointNext:"",
|
|
|
+ loading : null,
|
|
|
+ navgtrSpeed:1,
|
|
|
+ //地图中心位置
|
|
|
+ centerPoint:{
|
|
|
+ pointLat:"",
|
|
|
+ pointLon:""
|
|
|
+ },
|
|
|
+ //自定义窗体信息
|
|
|
+ ctmarkes:{
|
|
|
+ lat:"33.015888071433764",
|
|
|
+ lon : "115.96995235868168",
|
|
|
+ title:"豫SE8888",
|
|
|
+ details:"安徽省阜阳市颍东区阜阳舜岳水泥公司,西北方向,155.1米"
|
|
|
+ },
|
|
|
+ //运输详情
|
|
|
+ transportDetail:{
|
|
|
+ //车牌号
|
|
|
+ capacityNumber:'',
|
|
|
+ //规划路线
|
|
|
+ estimateRoute:[
|
|
|
+ {
|
|
|
+ lat:"33.015888071433764",
|
|
|
+ lon : "115.96995235868168"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //规划线路
|
|
|
+ estimatePath:[
|
|
|
+ [
|
|
|
+ 114.03046212985384,
|
|
|
+ 32.49786984660489
|
|
|
+ ],
|
|
|
+
|
|
|
+ ],
|
|
|
+ //已行驶轨迹
|
|
|
+ runRoute:[
|
|
|
+ {
|
|
|
+ agl: "44",
|
|
|
+ gtm: "2022年03月09日 16:47:24",
|
|
|
+ hgt: "13",
|
|
|
+ lat: "32.906411535084985",
|
|
|
+ lon: "115.76177868692135",
|
|
|
+ mil: "429409.2",
|
|
|
+ spd: "17.0"
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ runPath: [
|
|
|
+ [
|
|
|
+ 114.03922119568348,
|
|
|
+ 32.49746162481379
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ //当前位置
|
|
|
+ currentPointName:"中国达州市通川区",
|
|
|
+ //当前位置经纬度
|
|
|
+ currentPoint:{
|
|
|
+ lat:"",
|
|
|
+ lon:""
|
|
|
+ },
|
|
|
+ //起点位置
|
|
|
+ startPointName:"中国达州市通川区",
|
|
|
+ //起点位置经纬度
|
|
|
+ startPoint:{
|
|
|
+ lon:"114.03922119568348",
|
|
|
+ lat:"32.49746162481379"
|
|
|
+ },
|
|
|
+ //终点位置
|
|
|
+ endPointName:"中国成都萧山",
|
|
|
+ //终点位置经纬度
|
|
|
+ endPoint:{
|
|
|
+ lon:"115.96995737755431",
|
|
|
+ lat:"33.01595479752097"
|
|
|
+ },
|
|
|
+ //自定义标记
|
|
|
+ content:[],
|
|
|
+ //异常位置
|
|
|
+ abnormalLocation:[],
|
|
|
+
|
|
|
+ },
|
|
|
+ listPath:[
|
|
|
+
|
|
|
+ ],
|
|
|
+ //组件
|
|
|
+ pathSimplifierIns:{},
|
|
|
+ pathNavigator:{}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ let that=this;
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ formatDate (date, fmt) {
|
|
|
+ if (/(y+)/.test(fmt)) {
|
|
|
+ fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
|
|
|
+ }
|
|
|
+ let o = {
|
|
|
+ 'M+': date.getMonth() + 1,
|
|
|
+ 'd+': date.getDate(),
|
|
|
+ "h+": date.getHours(),
|
|
|
+ "m+": date.getMinutes(),
|
|
|
+ "s+": date.getSeconds(),
|
|
|
+ }
|
|
|
+ for (let k in o) {
|
|
|
+ if (new RegExp(`(${k})`).test(fmt)) {
|
|
|
+ let str = o[k] + ''
|
|
|
+ fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return fmt
|
|
|
+ },
|
|
|
+ padLeftZero (str) {
|
|
|
+ return ('00' + str).substr(str.length)
|
|
|
+ },
|
|
|
+ geocoder(){
|
|
|
+ AMap.plugin('AMap.Geocoder', function() {
|
|
|
+ var geocoder = new AMap.Geocoder({
|
|
|
+ // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
|
|
+ city: '全球'
|
|
|
+ })
|
|
|
+
|
|
|
+ var lnglat = [116.396574, 39.992706]
|
|
|
+ console.log("fsdaf")
|
|
|
+ geocoder.getAddress(lnglat, function(status, result) {
|
|
|
+ console.log(result)
|
|
|
+ if (status === 'complete' && result.info === 'OK') {
|
|
|
+ // result为对应的地理位置详细信息
|
|
|
+ console.log(result)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ play(){
|
|
|
+ let that =this;
|
|
|
+ that.pathNavigator.resume();
|
|
|
+ },
|
|
|
+ stop(){
|
|
|
+ let that =this;
|
|
|
+ that.pathNavigator.pause();
|
|
|
+ this.geocoder()
|
|
|
+ },
|
|
|
+ addIndexSpeed(){
|
|
|
+
|
|
|
+ },
|
|
|
+ addIndex(){
|
|
|
+ console.log("1123")
|
|
|
+
|
|
|
+ let that =this;
|
|
|
+ let increment=(that.listPath[0].runPath.length*0.1)
|
|
|
+ that.pathNavigator.start(((that.point+increment)%that.listPath[0].runPath.length))
|
|
|
+ },
|
|
|
+ ///che
|
|
|
+ navgControl(){
|
|
|
+
|
|
|
+ },
|
|
|
+ speedFormat(value){
|
|
|
+ let that=this;
|
|
|
+ that.speedVal=value
|
|
|
+
|
|
|
+ if(that.pathNavigator!=null){
|
|
|
+
|
|
|
+ that.pathNavigator.setSpeed(1000*value)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ hideFormat(value){
|
|
|
+ let that=this;
|
|
|
+ that.sliderVal=value;
|
|
|
+ },
|
|
|
+ initData(orderNumber){
|
|
|
+ let that=this;
|
|
|
+ if(that.carNumber==""){
|
|
|
+ this.$message.error('车牌号不能为空！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(that.time==[]){
|
|
|
+ this.$message.error('请选择时间');
|
|
|
+ }
|
|
|
+ that.axios.post("/api/v1/otms/fullPathVisualizationByCarNumber",
|
|
|
+ {
|
|
|
+ "capacityNumber":that.carNumber,
|
|
|
+ "startTime":that.formatDate(that.time[0],"yyyy-MM-dd hh:mm:ss"),
|
|
|
+ "endTime":that.formatDate(that.time[1],"yyyy-MM-dd hh:mm:ss"),
|
|
|
+ }
|
|
|
+ ).then((res) => {
|
|
|
+ if(res.data.startAndEndRoutes!=''){
|
|
|
+ that.listPath=res.data.startAndEndRoutes
|
|
|
+ that.initMap();
|
|
|
+ }else{
|
|
|
+ this.$message.error('车辆没有开启GPS');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ endline(){
|
|
|
+ let that=this;
|
|
|
+ that.initPolyline(that.listPath[0].estimatePath,"#FF0000");
|
|
|
+ },
|
|
|
+ //创建起点终点当前点
|
|
|
+ threeMarker(){
|
|
|
+ let that=this;
|
|
|
+ that.listPath.forEach((element,index) => {
|
|
|
+ //开始标记点
|
|
|
+ if(element.startPoint.lon!=''&&element.startPoint.lat!=''){
|
|
|
+ that.initMarkes(20,35,require('@/assets/img/start.png'),element.startPoint.lon,element.startPoint.lat,'起点');
|
|
|
+ }
|
|
|
+ //结束标记点
|
|
|
+ console.log(element.endPoint,"element.endPoint")
|
|
|
+ if(element.endPoint!={}&&element.endPoint!=''&&element.endPoint!=null){
|
|
|
+ console.log("1111")
|
|
|
+ that.initMarkes(20,35,require('@/assets/img/end.png'),element.endPoint.lon,element.endPoint.lat,'终点');
|
|
|
+ }else{
|
|
|
+ console.log(element)
|
|
|
+ that.initMarkes(20,35,require('@/assets/img/end.png'),element.runRoute[element.runRoute.length-1].lon,element.runRoute[element.runRoute.length-1].lat,'终点');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ //初始化地图
|
|
|
+ initMap(){
|
|
|
+ lazyAMapApiLoaderInstance.load().then(() => {
|
|
|
+ let that=this;
|
|
|
+ that.map = new AMap.Map("amap-container",{ //设置地图容器id
|
|
|
+ viewMode:"2D", //是否为2D地图模式
|
|
|
+ zoom:10, //初始化地图级别
|
|
|
+ center:[105.602725,37.076636], //初始化地图中心点位置
|
|
|
+ });
|
|
|
+ that.initPathSimplifier();
|
|
|
+ that.threeMarker();
|
|
|
+ console.log("that.listPath[0]",that.listPath)
|
|
|
+ that.initCustomMarkes(that.carNumber+"("+that.listPath[0].miled+")",that.listPath[0].currentPointName,that.listPath[0].currentPoint.lon,that.listPath[0].currentPoint.lat)
|
|
|
+ that.endline();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initCustomMarkes(title,details,lon,lat){
|
|
|
+ let that=this;
|
|
|
+ //自定义窗体内容
|
|
|
+ var content = [
|
|
|
+ "<div style='top:1px;width: 180px; background-color: rgba(0, 0, 0, 1);' ><font color='white'>"+title+"</font>",
|
|
|
+ "<div style='background-color:rgba(255, 255, 255, 0.5);'><font color='white'>"+details+"</font></div></div>"
|
|
|
+ ];
|
|
|
+ // 创建 infoWindow 实例
|
|
|
+ var infoWindow = new AMap.InfoWindow({
|
|
|
+ content: content.join("<br>") //传入 dom 对象，或者 html 字符串
|
|
|
+ });
|
|
|
+ // 打开信息窗体
|
|
|
+ infoWindow.open(that.map,[lon,lat]);
|
|
|
+ },
|
|
|
+ initPolyline(path,color){
|
|
|
+ let that=this;
|
|
|
+ //预计轨迹
|
|
|
+ var endLine = new AMap.Polyline({
|
|
|
+ map:that.map,
|
|
|
+ path: path,
|
|
|
+ isOutline: true,
|
|
|
+ outlineColor: color,
|
|
|
+ borderWeight: 0,
|
|
|
+ strokeColor: "#FF0000",
|
|
|
+ strokeOpacity: 1,
|
|
|
+ strokeWeight: 5,
|
|
|
+ // 折线样式还支持 'dashed'
|
|
|
+ strokeStyle: "solid",
|
|
|
+ // strokeStyle是dashed时有效
|
|
|
+ strokeDasharray: [10, 5],
|
|
|
+ lineJoin: 'round',
|
|
|
+ lineCap: 'round',
|
|
|
+ zIndex: 50,
|
|
|
+ })
|
|
|
+ that.map.setFitView([[ endLine ]])
|
|
|
+ },
|
|
|
+ //创建简单的标记
|
|
|
+ initMarkes(weight,height,image,lon,lat,title){
|
|
|
+ let that=this;
|
|
|
+ //图标标记点
|
|
|
+ let pointicon = new AMap.Icon({
|
|
|
+ size: new AMap.Size(weight, height), // 图标尺寸
|
|
|
+ image: image, // Icon的图像
|
|
|
+ imageOffset: new AMap.Pixel(0,0), // 图像相对展示区域的偏移量，适于雪碧图等
|
|
|
+ imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
|
|
|
+ });
|
|
|
+ // 创建一个 Marker 实例：
|
|
|
+ var pointmarker = new AMap.Marker({
|
|
|
+ position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
+ icon: pointicon,
|
|
|
+ title: title
|
|
|
+ });
|
|
|
+ // 将创建的点标记添加到已有的地图实例：
|
|
|
+ that.map.add(pointmarker);
|
|
|
+ },
|
|
|
+ //创建轨迹和巡航器
|
|
|
+ initPathSimplifier() {
|
|
|
+ let that=this;
|
|
|
+ // ...你的操作
|
|
|
+ new AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
|
|
|
+ if (!PathSimplifier.supportCanvas) {
|
|
|
+ alert('当前环境不支持 Canvas！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //创建轨迹和巡航器
|
|
|
+ // 创建组件实例
|
|
|
+ that.pathSimplifierIns = new PathSimplifier({
|
|
|
+ map: that.map,
|
|
|
+ zIndex: 100, // 图层叠加顺序
|
|
|
+ data: that.listPath, // 巡航路径
|
|
|
+ // 获取巡航路径中的路径坐标数组
|
|
|
+ getPath: (pathData, pathIndex) => {
|
|
|
+ return pathData.runPath;
|
|
|
+ },
|
|
|
+ //鼠标悬浮停时显示消息
|
|
|
+ getHoverTitle: function(pathData, pathIndex, pointIndex) {
|
|
|
+ //返回鼠标悬停时显示的信息
|
|
|
+ if (pointIndex >= 0) {
|
|
|
+ if(pathData.runRoute[pointIndex].gtm!=='undefined'){
|
|
|
+ //鼠标悬停在某个轨迹节点上
|
|
|
+ return pathData.runRoute[pointIndex].gtm + '，速度'+ pathData.runRoute[pointIndex].spd+'千米/小时，点:' + pointIndex + '/' + pathData.runPath.length;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //设置轨迹样式
|
|
|
+ renderOptions: {
|
|
|
+ //轨迹线的样式
|
|
|
+ pathLineStyle: {
|
|
|
+ strokeStyle: 'black',
|
|
|
+ lineWidth: 6,
|
|
|
+ dirArrowStyle: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 创建巡航器
|
|
|
+ that.pathNavigator = that.pathSimplifierIns.createPathNavigator(0, {
|
|
|
+ loop: true, // 是否循环
|
|
|
+ speed: that.speed ,// 速度(km/h)
|
|
|
+ pathNavigatorStyle: {
|
|
|
+ width: 20,
|
|
|
+ height: 40,
|
|
|
+ content:PathSimplifier.Render.Canvas.getImageContent( require('@/assets/img/smallcar.png'), onload, onerror),
|
|
|
+ strokeStyle: null,
|
|
|
+ fillStyle: null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //开启巡航
|
|
|
+ that.pathNavigator.start()
|
|
|
+
|
|
|
+ //开始事件
|
|
|
+ that.pathNavigator.on("start resume", function() {
|
|
|
+ // that.navgtr._startTime = Date.now();
|
|
|
+ // that.navgtr._startDist = this.getMovedDistance();
|
|
|
+ });
|
|
|
+ //暂停
|
|
|
+ that.pathNavigator.on("stop pause", function() {
|
|
|
+ // that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
|
|
|
+ // that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
|
|
|
+ });
|
|
|
+ that.pathNavigator.on('move', function (data,value) {
|
|
|
+ that.updateLable(value)
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ updateLable(value){
|
|
|
+ let that=this;
|
|
|
+ that.point=value.dataItem.pointIndex;
|
|
|
+ that.runRoute=value.dataItem.pathData.runRoute[that.point];
|
|
|
+ that.sliderVal=(value.dataItem.pointIndex/value.dataItem.pathData.runRoute.length)*100;
|
|
|
+ },
|
|
|
+ changeSpeed(value){
|
|
|
+ // console.log(value)
|
|
|
+ // let that=this;
|
|
|
+ // that.times=value;
|
|
|
+
|
|
|
+ },
|
|
|
+ playIcon(){
|
|
|
+
|
|
|
+ },
|
|
|
+ changeTime(){
|
|
|
+ let that=this;
|
|
|
+ console.log((that.time[1]-that.time[0])-(86400000*3))
|
|
|
+ if((that.time[1]-that.time[0])>86400000*3){
|
|
|
+ this.$message.error('时间查询范围不能超过3天');
|
|
|
+ that.time=[];
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.inputStyle{
|
|
|
+ position: absolute;
|
|
|
+ width: 200px;
|
|
|
+ left: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.controller{
|
|
|
+ width: 100%; height: 50px;
|
|
|
+ background: white;
|
|
|
+ position: absolute;z-index:99;top:0;left:0;
|
|
|
+
|
|
|
+}
|
|
|
+.in_transit_information{
|
|
|
+
|
|
|
+ width: 200px;
|
|
|
+ float: left;
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+.in_transit_information2 {
|
|
|
+
|
|
|
+ height: 40px;
|
|
|
+ float: left;
|
|
|
+ width: 580px;
|
|
|
+}
|
|
|
+.container{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+}
|
|
|
+.date_picker_style{
|
|
|
+ position: relative;
|
|
|
+ left: 40px;
|
|
|
+}
|
|
|
+.item_details {
|
|
|
+ position: relative;
|
|
|
+ left: 30px;
|
|
|
+ top: 5px;
|
|
|
+ height: 0px;
|
|
|
+}
|
|
|
+#amap-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0;
|
|
|
+ font-family: "微软雅黑";
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 进度条 */
|
|
|
+.mySlider {
|
|
|
+
|
|
|
+ width: 150px;
|
|
|
+ height: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ left: 32px;
|
|
|
+}
|
|
|
+/* 进度条 */
|
|
|
+.mySlider2 {
|
|
|
+
|
|
|
+ width: 400px;
|
|
|
+ height: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ left: 32px;
|
|
|
+}
|
|
|
+.play {
|
|
|
+ position: relative;
|
|
|
+ left: 28px;
|
|
|
+}
|
|
|
+.quickly
|
|
|
+{
|
|
|
+ float: right;
|
|
|
+ position: relative;
|
|
|
+ left: -20px;
|
|
|
+ top: 10px;
|
|
|
+}
|
|
|
+.pause {
|
|
|
+ position: relative;
|
|
|
+ left: 28px;
|
|
|
+}
|
|
|
+.passed-time{
|
|
|
+ position: relative;
|
|
|
+ left: 5px;
|
|
|
+}
|
|
|
+.end-time{
|
|
|
+ position: relative;
|
|
|
+ left: 5px;
|
|
|
+}
|
|
|
+.map-times {
|
|
|
+ position: relative;
|
|
|
+ width: 40px;
|
|
|
+}
|
|
|
+.searchstyle{
|
|
|
+ position: relative;
|
|
|
+ left: 5px;
|
|
|
+}
|
|
|
+.map-control{
|
|
|
+ float: left;
|
|
|
+ width: 270px;
|
|
|
+}
|
|
|
+.driving_information {
|
|
|
+ height: 40px;
|
|
|
+ width: 240px;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
Tiroble