地标.html
3.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 以下的链接地址中最后ak请自行到百度开发者中心申请 -->
<script src="http://api.map.baidu.com/api?v=2.0&ak=tBGkcuOLqfRPot0mIWjKefcM"></script>
<title>百度地图的使用</title>
<style>
#container {
width: 100%;
height: 695px;
}
.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-there {
width: 20%;
height: 100%;
border: 1px rgb(55, 149, 242) solid;
border-radius: 20px;
background-color: #eeeeee;
}
.dv-foxe {
width: 20%;
height: 100%;
border: 1px rgb(55, 149, 242) solid;
border-radius: 20px;
background-color: #eeeeee;
}
.tiem {
width: 200px;
height: 50px;
z-index: 9999;
position: absolute;
top: 10px;
left: 100px;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="dv-buttm">
<div class="dv-one">1</div>
<div class="dv-two">2</div>
<div class="dv-there">3</div>
<div class="dv-foxe">4</div>
</div>
<div class="tiem">倒计时：<span id="Time">10</span></div>
<script>
// 创建地图实例
var map = new BMap.Map('container')
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 point = new BMap.Point(113.34693, 28.21849)
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 17)
var infoWindow = new BMap.InfoWindow(sContent)
map.openInfoWindow(infoWindow, point) //开启信息窗口
// 添加地图上的覆盖物——标记
var mk = new BMap.Marker(point)
mk.setAnimation(BMAP_ANIMATION_BOUNCE)
map.addOverlay(mk)
// 启用滚轮缩放
map.enableScrollWheelZoom(true)
// 添加导航控件
map.addControl(new BMap.NavigationControl())
// 添加缩放控件
map.addControl(new BMap.ScaleControl())
// 添加概览图控件
map.addControl(new BMap.OverviewMapControl())
// 添加地图类型控件
map.addControl(new BMap.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>
</body>
</html>