<template>
    <div id="demo">
        <el-main id="container" style="position:relative;"></el-main>
        <!--控制条-->
        <div class="map-control" v-show="isActual">
            <!--播放暂停按钮-->
            <Icon
                v-if="!isPlay"
                class="play-icon"
                type="ios-play"
                @click="isPlay=true;navgControl('start')"
            />
            <Icon v-else class="play-icon" type="ios-pause" @click="isPlay=false;navgControl('pause')"/>
            <!--已播放时间-->
            <span class="passed-time">{{passedTime}}</span>
            <!--进度条-->
            <el-slider v-model="sliderVal" :format-tooltip="hideFormat" :step="0.0001"></el-slider>
            <!--倍速-->
            <div class="map-times" @mouseenter="isTimesChoose=true" @mouseleave="isTimesChoose=false">
                <div class="times-show">倍速 {{times}}</div>
                <div class="choose-box">
                <ul v-show="isTimesChoose">
                    <li v-for="item in speedList" :key="item.value" :class="{active:times==item.value}" @click="changeSpeed(item.value)">{{item.label}}</li>
                </ul>
            </div>
        </div>
        <!--结束时间-->
        <span class="passed-time">{{totalTime}}</span>
        </div>
    </div>
</template>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=eed46ea40bbcadbf8a9cdd5dc1a94642"></script>
<script>
import GAODEMap from "./GAODEMap.js";
export default {
  name: "GAODEMap",
  extends: GAODEMap,
  data() {
        return {
            //地图展示中心点
            centerPoint:{
                pointLat:"",
                pointLon:""
            },
        };
    },
}
</script>
<style>

#container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}
.info_card {
    display: inline-block;margin: 50px auto;position: absolute;width: 200px;height:150px;background-color: #c7c9c8AA;border: 5px solid #ffffff;color: #000000;
}
.info_card .title{
    width: 100%;
    height:40px;
    background-color: #000000AA;
    color: #ffffff;
}

.title span.title_name{
    position: relative;
    top: 7px;
    left: 10px;
    font-size: 18px;
}


.info_card .title .close_img{
    position: absolute;
    top:10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
}
.info_card .title .close_img .min {
    width: 0;
    height: 0;
    font-size:0;
    overflow:hidden;
    position:absolute;
    border-width:10px;
}

.info_card .title .close_img .top_img {
    border-style:solid dashed dashed;
    border-color:#000000 transparent transparent transparent;
    top:-2px;
}

.info_card .title .close_img .right_img {
    border-style:solid dashed dashed;
    border-color:transparent #000000 transparent transparent;
    left:2px;
}

.info_card .title .close_img .bottom_img{
    border-style:solid dashed dashed;
    border-color:transparent transparent #000000 transparent;
    top:2px;
}

.info_card .title .close_img .left_img{
    border-style:solid dashed dashed;
    border-color:transparent transparent transparent #000000;
    left:-2px;
}

.info_card span.cancle{
    width:0;
    height:0;
    font-size:0;
    overflow:hidden;
    position:absolute;
}

.info_card span.bot{
    border-width:20px;
    border-style:solid dashed dashed;
    border-color:#ffffff transparent transparent;
    left:80px;
    bottom:-40px;
}
.info_card span.top{
    border-width:20px;
    border-style:solid dashed dashed;
    border-color:#c7c9c8AA transparent transparent;
    left:80px;
    bottom:-33px;
}
.info_card .content{
    margin-top: 10px;
    margin-left: 10px;
}
</style>