forked from qiubaiying/qiubaiying.github.io
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap.html
191 lines (177 loc) · 6.4 KB
/
map.html
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
---
layout: default-photo
title: "Map"
description: "To Travel"
header-img: "img/post-bg-ioses.jpg"
---
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>给多个点添加信息窗体</title>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=7d1c12839fa642cb7ccc21935c516dbb"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<style>
html,
body {
height: 100%;
}
#container {
width: 100%;
height: 60%;
}
.button-group {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 12px;
padding: 10px;
}
.button-group .button {
height: 28px;
line-height: 28px;
background-color: #0D9BF2;
color: #FFF;
border: 0;
outline: none;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
margin-bottom: 4px;
cursor: pointer;
}
.button-group .inputtext {
height: 26px;
line-height: 26px;
border: 1px;
outline: none;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
margin-bottom: 4px;
cursor: pointer;
}
/*
.tip {
position: absolute;
bottom: 30px;
right: 10px;
background-color: #FFF;
text-align: center;
border: 1px solid #ccc;
line-height: 30px;
border-radius: 3px;
padding: 0 5px;
font-size: 12px;
}
*/
#tip {
background-color: #fff;
padding-left: 10px;
padding-right: 10px;
position: absolute;
font-size: 12px;
right: 10px;
top: 20px;
border-radius: 3px;
border: 1px solid #ccc;
line-height: 30px;
}
/*
#tip input[type='button'] {
margin-top: 10px;
margin-bottom: 10px;
background-color: #0D9BF2;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
font-size: 12px;
border-radius: 3px;
outline: none;
border: 0;
}
*/
.amap-info-content {
font-size: 12px;
}
#myPageTop {
position: absolute;
top: 5px;
right: 10px;
background: #fff none repeat scroll 0 0;
border: 1px solid #ccc;
margin: 10px auto;
padding: 6px;
font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
font-size: 14px;
}
#myPageTop label {
margin: 0 20px 0 0;
color: #666666;
font-weight: normal;
}
#myPageTop input {
width: 170px;
}
#myPageTop .column2 {
padding-left: 25px;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//初始化地图对象，加载地图
var map = new AMap.Map("container", {
resizeEnable: true,
center: [80, 35],
zoom: 3
});
var lnglats = [
[116.481181, 39.989792], //北京
[91.1721, 29.6525], //拉萨
[121.4737, 31.2304], //上海
[114.3055, 30.5928], //武汉
[104.0668, 30.5728], //成都
[108.9398, 34.3416], //西安
[118.3375, 29.7147], //黄山
[120.3826, 36.0671], //青岛
[114.1694, 22.3193], //香港
[106.9123, 29.4316], //重庆
[-9.0800, 38.4300], //里斯本
[-9.4989, 38.7804], //罗卡角
];
var neirong = [
["<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>"],
['我是拉萨'],
['上海<br/>特色美食：红烧肉<br/><a href="https://www.bilibili.com/video/BV15Z4y1L7Y2">Vlog03 松江大学城沿河慢跑听歌向</a>'],
['武汉<br/>特色美食：武昌鱼，排骨藕汤<br/><a href="https://www.bilibili.com/video/BV1jT4y1P7JA">Vlog06 滑道滑行听歌向</a><br/><a href="https://www.bilibili.com/video/BV19h411Y7Dk">Vlog07 【时光机】武汉happy游</a>'],
['我是成都'],
['我是西安'],
['我是黄山'],
['我是青岛'],
['我是香港'],
['我是重庆火锅哈哈哈'],
['里斯本<br/>特色美食：蛋挞，鳕鱼<br/><a href="https://www.bilibili.com/video/BV1TT4y1A7iN">Vlog02【时光机】高高的航海纪念碑和小小的贝伦塔</a><br/><a href="https://www.bilibili.com/video/BV13y4y1r7N2">Vlog04【时光机】去吃贝伦蛋挞~正宗的葡式蛋挞</a><br/><a href="https://www.bilibili.com/video/BV1354y1H75i">Vlog08 【时光机】葡萄牙里斯本三大升降机</a><br/><a href="https://www.bilibili.com/video/BV1d44y1i7Rf">Vlog09 【时光机】葡萄牙辛特拉皇宫</a><br/><a href="https://www.bilibili.com/video/BV1Jf4y1J7Q6/">Vlog10 【时光机】葡萄牙雷加莱拉宫</a>'],
['罗卡角<br/><a href="https://www.bilibili.com/video/BV13U4y1R7MN">Vlog12 那年夏天宁静的罗卡角</a>'],
]
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
for (var i = 0, marker; i < lnglats.length; i++) {
var marker = new AMap.Marker({
position: lnglats[i],
map: map,
});
marker.content = neirong[i];
marker.on('mouseover', markerClick);
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
</script>
</body>
</html>