2025-09-14 14:53:14 +08:00
|
|
|
|
<!DOCTYPE html>
|
2025-09-18 23:33:24 +08:00
|
|
|
|
<html lang="zh-CN">
|
2025-09-14 14:53:14 +08:00
|
|
|
|
<head>
|
2025-09-18 23:33:24 +08:00
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>WS实时推送轨迹 - Google Map</title>
|
|
|
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
2025-09-14 16:18:12 +08:00
|
|
|
|
<style>
|
2025-09-18 23:33:24 +08:00
|
|
|
|
html, body { height: 100%; margin: 0; padding: 0; }
|
|
|
|
|
|
#map { width: 100vw; height: 100vh; }
|
2025-09-14 16:18:12 +08:00
|
|
|
|
</style>
|
2025-09-14 14:53:14 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2025-09-14 16:18:12 +08:00
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
<script>
|
2025-09-18 23:33:24 +08:00
|
|
|
|
// 初始化轨迹
|
|
|
|
|
|
let path = [];
|
|
|
|
|
|
let map, marker, polyline;
|
2025-09-14 14:53:14 +08:00
|
|
|
|
|
2025-09-14 16:18:12 +08:00
|
|
|
|
function initMap() {
|
2025-09-18 23:33:24 +08:00
|
|
|
|
map = new google.maps.Map(document.getElementById("map"), {
|
|
|
|
|
|
zoom: 14,
|
|
|
|
|
|
center: {lat: 23.0, lng: 121.1}
|
2025-09-14 16:18:12 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
2025-09-18 23:33:24 +08:00
|
|
|
|
polyline = new google.maps.Polyline({
|
|
|
|
|
|
path: path,
|
2025-09-14 16:18:12 +08:00
|
|
|
|
geodesic: true,
|
2025-09-18 23:33:24 +08:00
|
|
|
|
strokeColor: "#e53935",
|
2025-09-14 16:18:12 +08:00
|
|
|
|
strokeOpacity: 0.8,
|
2025-09-18 23:33:24 +08:00
|
|
|
|
strokeWeight: 4,
|
|
|
|
|
|
map: map
|
2025-09-14 16:18:12 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
2025-09-18 23:33:24 +08:00
|
|
|
|
marker = new google.maps.Marker({
|
2025-09-14 16:18:12 +08:00
|
|
|
|
map: map,
|
2025-09-18 23:33:24 +08:00
|
|
|
|
icon: {
|
|
|
|
|
|
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
|
|
|
|
|
|
scaledSize: new google.maps.Size(32, 32)
|
|
|
|
|
|
}
|
2025-09-14 16:18:12 +08:00
|
|
|
|
});
|
|
|
|
|
|
}
|
2025-09-18 23:33:24 +08:00
|
|
|
|
|
|
|
|
|
|
// 连接WebSocket
|
|
|
|
|
|
function connectWS() {
|
|
|
|
|
|
// 换成你的ws地址！
|
|
|
|
|
|
const ws = new WebSocket("ws://127.0.0.1:8099/ws/2746/b9164a7f-f14a-4df0-ab25-e7dae9881796");
|
|
|
|
|
|
ws.onopen = () => console.log("WebSocket已连接");
|
|
|
|
|
|
ws.onmessage = (evt) => {
|
|
|
|
|
|
// 假设后端发过来的是一个点 [lng, lat] 或一组点 [[lng,lat],...]
|
|
|
|
|
|
let data = JSON.parse(evt.data);
|
|
|
|
|
|
if(data.cmdType==='update_path'){
|
|
|
|
|
|
let points = [];
|
|
|
|
|
|
if (Array.isArray(data[0])) {
|
|
|
|
|
|
// 一组点
|
|
|
|
|
|
points = data.map(([lng, lat]) => ({lat, lng}));
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// 单个点
|
|
|
|
|
|
const [lng, lat] = data;
|
|
|
|
|
|
points = [{lat, lng}];
|
|
|
|
|
|
}
|
|
|
|
|
|
// 更新轨迹
|
|
|
|
|
|
points.forEach(pt => path.push(pt));
|
|
|
|
|
|
polyline.setPath(path);
|
|
|
|
|
|
if (path.length === 1) map.setCenter(path[0]);
|
|
|
|
|
|
marker.setPosition(path[path.length - 1]);
|
|
|
|
|
|
map.panTo(path[path.length - 1]);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
ws.onerror = (e) => console.log("WS错误", e);
|
|
|
|
|
|
ws.onclose = () => {
|
|
|
|
|
|
console.log("WS断开，3秒后重连");
|
|
|
|
|
|
setTimeout(connectWS, 3000);
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
window.initMap = initMap;
|
|
|
|
|
|
window.onload = () => {
|
|
|
|
|
|
// 保证Google Map加载完后再连ws
|
|
|
|
|
|
setTimeout(connectWS, 1000);
|
|
|
|
|
|
};
|
2025-09-14 16:18:12 +08:00
|
|
|
|
</script>
|
2025-09-18 23:33:24 +08:00
|
|
|
|
<!-- 你的 Google Map API KEY -->
|
|
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIN8ap3znRdSCwW4p3q4ZCpxy3mjBJKNQ&callback=initMap" async defer></script>
|
2025-09-14 14:53:14 +08:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
