ProjectMap.cshtml 4.37 KB
@section header
    {
    <link rel="stylesheet" href="/css/main.css" media="all" />
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/homecss/bootstrap.min.css" rel="stylesheet" />
    <link href="/css/homecss/font-awesome.min.css" rel="stylesheet" />
    <link href="/css/homecss/animate.min.css" rel="stylesheet" />
    <link href="/css/homecss/style.min862f.css" rel="stylesheet" />
}
<style>
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }

    .dv-buttm {
        width: 99.9%;
        height: 100px;
        display: flex;
        z-index: 9999;
        position: absolute;
        top: 550px;
        left: 0px;
        justify-content: space-evenly;
    }

    .dv-one {
        width: 20%;
        height: 100%;
        border: 1px rgb(55, 149, 242) solid;
        border-radius: 20px;
        background-color: #eeeeee;
    }

    .dv-two {
        width: 20%;
        height: 100%;
        border: 1px rgb(55, 149, 242) solid;
        border-radius: 20px;
        background-color: #eeeeee;
    }

    .dv-three {
        width: 20%;
        height: 100%;
        border: 1px rgb(55, 149, 242) solid;
        border-radius: 20px;
        background-color: #eeeeee;
    }

    .dv-four {
        width: 20%;
        height: 100%;
        border: 1px rgb(55, 149, 242) solid;
        border-radius: 20px;
        background-color: #eeeeee;
    }

    .time {
        width: 200px;
        height: 50px;
        z-index: 9999;
        position: absolute;
        top: 10px;
        left: 100px;
    }
</style>

    <div id="container"></div>
      <div class="dv-buttm">
        <div class="dv-one">1</div>
        <div class="dv-two">2</div>
        <div class="dv-three">3</div>
        <div class="dv-four">4</div>
      </div>
    <div class="time">倒计时:<span id="Time">10</span></div>

@section Scripts
{
@*<script type="text/javascript" src="/layui/layui.js"></script>*@
 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=tBGkcuOLqfRPot0mIWjKefcM"></script>
 <script type="text/javascript">

        var map = new BMapGL.Map("container");          // 创建地图实例
        var point = new BMapGL.Point(113.34693, 28.21849);  // 创建点坐标
        map.centerAndZoom(point, 17);//初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);//启用滚轮缩放
        //map.setHeading(64.5);   //设置地图旋转角度
        //map.setTilt(73);       //设置地图的倾斜角度

        // 禁止地图旋转和倾斜可以通过配置项进行设置
        //var map = new BMapGL.Map("allmap", {
        //    enableRotate: false,
        //    enableTilt: false
        //});
        var sContent = "<h4 style = 'margin:0;'>长沙华恒机器人系统有限公司</h4><br/>地址:湖南省长沙市浏阳市永裕北路和鼎盛路的交叉路口处<div style = 'display: flex;'><div><a href=''>12</a></div> <div style='margin-left:10px;'>456</div> <div style='margin-left:10px;'>789</div></div>" //定义大标题  写html语句标签
        var infoWindow=new BMapGL.InfoWindow(sContent)
        map.openInfoWindow(infoWindow,point);

        // 添加地图上的覆盖物——标记
        var mk = new BMapGL.Marker(point)
        mk.setAnimation(BMAP_ANIMATION_BOUNCE)
        map.addOverlay(mk)

        // 添加导航控件
        map.addControl(new BMapGL.NavigationControl())
        // 添加缩放控件
        //map.addControl(new BMapGL.ScaleControl())
        // 添加概览图控件
        //map.addControl(new BMapGL.OverviewMapControl())
        // 添加地图类型控件
        //map.addControl(new BMapGL.MapTypeControl())

        //使用匿名函数方法 一秒调一次 更改提示数值
        var myVar = setInterval(function () {
            countDown()
        }, 1000)
        // 函数方法
        function countDown() {
            // 获取提示数值
            var time = document.getElementById('Time')
            //获取到id为time标签中的内容,现进行判断
            if (time.innerHTML == 0) {
                // //等于0时清除计时
                // clearInterval(myVar)
                // console.log('停止')
                time.innerHTML = 10
            } else {
                time.innerHTML = time.innerHTML - 1
            }
        }
    </script>
}