-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
305 lines (271 loc) · 14.1 KB
/
index.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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!DOCTYPE html>
<html>
<head>
<title>3D Maps with Street View</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-container {
height: 100%;
width: 70%;
float: left;
}
#street-view-container {
height: 100%;
width: 30%;
float: left;
}
#search-box {
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
display: flex;
align-items: center;
background-color: white;
border: 1px solid #ddd;
border-radius: 25px;
padding: 5px 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#address-input {
flex: 1;
padding: 10px;
border: none;
outline: none;
font-size: 16px;
border-radius: 20px;
background-color: transparent;
}
#search-button {
background-color: transparent;
border: none;
padding: 10px;
cursor: pointer;
transition: color 0.3s;
}
#search-button i {
font-size: 20px;
color: #333;
}
#search-button:hover {
color: #007bff;
}
#info-window {
position: absolute;
top: 80px;
right: 10px;
z-index: 2;
background-color: white;
border: 1px solid #ddd;
border-radius: 10px;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: none;
}
#advertisement {
width: 100%;
height: 200px;
}
#toggle-info-window {
position: absolute;
top: 52px;
right: 10px;
z-index: 3;
background-color: white;
border: 1px solid #ddd;
border-radius: 6px;
padding: 5px 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
#userLocation{
color: #007bff;
cursor: pointer;
text-decoration: underline #007bff;
}
</style>
</head>
<body>
<div id="search-box">
<input id="address-input" type="text" placeholder="Enter an address" />
<button id="search-button"><i class="fas fa-search"></i></button>
</div>
<div id="info-window">
<div id="userLocation"><p><strong >advertisement superlink<strong></p></div>
<p><strong>Address:</strong> <span id="address-detail"></span></p>
<p><strong>Latitude:</strong> <span id="latitude"></span></p>
<p><strong>Longitude:</strong> <span id="longitude"></span></p>
<p><strong>distance:</strong> <span id="distance"></span></p>
<div id="advertisement"></div>
</div>
<div id="map-container"></div>
<div id="street-view-container"></div>
<button id="toggle-info-window">Toggle Info Window</button>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIDtLk1Z5XvyoBBgatUfVqMDqocaLrcW8&v=alpha&libraries=maps3d,maps,places"></script>
<script>
// 计算两点之间的距离
function calculateDistance(lat1, lon1, lat2, lon2) {
const R = 6371; // 地球半径，单位为公里
const dLat = (lat2 - lat1) * Math.PI / 180;
const dLon = (lon2 - lon1) * Math.PI / 180;
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return R * c; // 返回距离，单位为公里
}
async function init() {
const { Map3DElement, Marker3DElement } = google.maps.maps3d;
const { Autocomplete } = google.maps.places;
let userPosition = null;
// 获取用户当前位置
function getUserPosition() {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(
(position) => resolve({ lat: position.coords.latitude, lng: position.coords.longitude }),
() => reject(new Error("Unable to get user position"))
);
});
}
let markerPan = null
getUserPosition().then((position) => {
userPosition = position;
const map3DElement = new Map3DElement({
center: { lat: userPosition.lat, lng: userPosition.lng, altitude: 400 },
range: 1000,
tilt: 60,
});
if (markerPan == null) {
const parser = new DOMParser();
// A marker with a custom inline SVG.
const pinSvgString = '<svg t="1731546655960" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8738" width="64" height="64"><path d="M403.911111 267.377778C335.644444 267.377778 284.444444 324.266667 284.444444 386.844444v278.755556c0 22.755556 17.066667 45.511111 45.511112 45.511111s45.511111-22.755556 45.511111-45.511111V455.111111c0-5.688889 5.688889-11.377778 11.377777-11.377778s5.688889 5.688889 5.688889 11.377778v506.311111c0 34.133333 17.066667 62.577778 51.2 62.577778 34.133333 0 56.888889-28.444444 56.888889-62.577778v-284.444444c0-5.688889 5.688889-11.377778 11.377778-11.377778s11.377778 5.688889 11.377778 11.377778V967.111111c5.688889 28.444444 28.444444 51.2 56.888889 51.2 34.133333 0 51.2-22.755556 51.2-62.577778V460.8c0-5.688889 5.688889-11.377778 11.377777-11.377778s11.377778 5.688889 11.377778 11.377778v210.488889c0 22.755556 17.066667 45.511111 45.511111 45.511111s39.822222-22.755556 39.822223-51.2V386.844444c0-68.266667-51.2-125.155556-119.466667-125.155555l-216.177778 5.688889zM512 0C443.733333 0 392.533333 56.888889 392.533333 125.155556c0 68.266667 51.2 125.155556 119.466667 125.155555 68.266667 0 119.466667-56.888889 119.466667-125.155555C631.466667 56.888889 580.266667 0 512 0z" fill="#F3C900" p-id="8739"></path></svg>'
const pinSvg =
parser.parseFromString(pinSvgString, 'image/svg+xml').documentElement;
markerPan = new Marker3DElement({
position: position,
});
const templateForSvg = document.createElement('template');
templateForSvg.content.append(pinSvg);
markerPan.append(templateForSvg)
map3DElement.append(markerPan)
} else {
markerPan.position = position
}
console.log(map3DElement)
document.getElementById('map-container').append(map3DElement);
// 更新街景视图
const streetView = new google.maps.StreetViewPanorama(
document.getElementById('street-view-container'), {
position: { lat: userPosition.lat, lng: userPosition.lng },
pov: {
heading: 34,
pitch: 10
},
zoom: 1
});
streetView.addListener("pano_changed", e => {
if (markerPan) {
markerPan.position = streetView.position
}
})
console.log(streetView)
map3DElement.addEventListener('gmp-click', (event) => {
const infoWindow = document.getElementById('info-window');
infoWindow.style.display = 'block';
if (markerPan == null) {
const parser = new DOMParser();
// A marker with a custom inline SVG.
const pinSvgString = '<svg t="1731546655960" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8738" width="64" height="64"><path d="M403.911111 267.377778C335.644444 267.377778 284.444444 324.266667 284.444444 386.844444v278.755556c0 22.755556 17.066667 45.511111 45.511112 45.511111s45.511111-22.755556 45.511111-45.511111V455.111111c0-5.688889 5.688889-11.377778 11.377777-11.377778s5.688889 5.688889 5.688889 11.377778v506.311111c0 34.133333 17.066667 62.577778 51.2 62.577778 34.133333 0 56.888889-28.444444 56.888889-62.577778v-284.444444c0-5.688889 5.688889-11.377778 11.377778-11.377778s11.377778 5.688889 11.377778 11.377778V967.111111c5.688889 28.444444 28.444444 51.2 56.888889 51.2 34.133333 0 51.2-22.755556 51.2-62.577778V460.8c0-5.688889 5.688889-11.377778 11.377777-11.377778s11.377778 5.688889 11.377778 11.377778v210.488889c0 22.755556 17.066667 45.511111 45.511111 45.511111s39.822222-22.755556 39.822223-51.2V386.844444c0-68.266667-51.2-125.155556-119.466667-125.155555l-216.177778 5.688889zM512 0C443.733333 0 392.533333 56.888889 392.533333 125.155556c0 68.266667 51.2 125.155556 119.466667 125.155555 68.266667 0 119.466667-56.888889 119.466667-125.155555C631.466667 56.888889 580.266667 0 512 0z" fill="#F3C900" p-id="8739"></path></svg>'
const pinSvg =
parser.parseFromString(pinSvgString, 'image/svg+xml').documentElement;
markerPan = new Marker3DElement({
position: event.position,
});
const templateForSvg = document.createElement('template');
templateForSvg.content.append(pinSvg);
markerPan.append(templateForSvg)
map3DElement.append(markerPan)
} else {
markerPan.position = event.position
}
console.log(event);
// Do something with event.position.
streetView.setPosition(event.position)
document.getElementById('latitude').innerText = event.position.lat.toFixed(6);
document.getElementById('longitude').innerText = event.position.lng.toFixed(6);
const distance = calculateDistance(userPosition.lat, userPosition.lng, event.position.lat, event.position.lng).toFixed(2);
document.getElementById('distance').innerText = distance + "km";
});
const input = document.getElementById('address-input');
const autocomplete = new Autocomplete(input);
let marker = null
autocomplete.addListener('place_changed', () => {
const place = autocomplete.getPlace();
if (place.geometry && place.geometry.location) {
const lat = place.geometry.location.lat();
const lng = place.geometry.location.lng();
const address = place.formatted_address;
// 更新地图中心
map3DElement.center = { lat, lng, altitude: 400 };
// 添加标记
const pinScaled = new google.maps.Marker({
scale: 1.5,
});
if (marker == null) {
marker = new Marker3DElement({
position: { lat: lat, lng: lng },
});
} else {
marker.position = { lat: lat, lng: lng }
}
marker.append(pinScaled);
map3DElement.append(marker);
console.log(marker)
// 计算距离
const distance = calculateDistance(userPosition.lat, userPosition.lng, lat, lng).toFixed(2);
// 显示信息窗口
const infoWindow = document.getElementById('info-window');
infoWindow.style.display = 'block';
document.getElementById('address-detail').innerText = address;
document.getElementById('latitude').innerText = lat.toFixed(6);
document.getElementById('longitude').innerText = lng.toFixed(6);
document.getElementById('distance').innerText = distance + "km";
const pop = new google.maps.InfoWindow({
content: infoWindow
});
pop.open(map3DElement, marker);
}
});
// 添加按钮点击事件来控制info-window的显示和隐藏
document.getElementById('toggle-info-window').addEventListener('click', () => {
const infoWindow = document.getElementById('info-window');
if (infoWindow.style.display === 'none' || infoWindow.style.display === '') {
infoWindow.style.display = 'block';
} else {
infoWindow.style.display = 'none';
}
});
//添加事件来控制用户自定义的位置跳转
document.getElementById('userLocation').addEventListener('click', () => {
const userLngLat = { lng: 114.196043, lat: 22.334355 }
map3DElement.center = { lat: userLngLat.lat, lng: userLngLat.lng ,altitude:400}
console.log(streetView)
streetView.setPosition( userLngLat)
if (markerPan) markerPan.position = userLngLat
})
}).catch((error) => {
console.error(error);
});
}
init();
</script>
</body>
</html>