From dc113f2d1f97b76edc1cf1456330f7e380908a06 Mon Sep 17 00:00:00 2001
From: CXM <chenzixin202209@163.com>
Date: Tue, 19 Mar 2024 15:34:34 +0000
Subject: [PATCH] implement page translate function and link it with every page
---
Logic/city.js | 149 +++++++++++++++++++++++++++++++++++
Logic/translate.php | 12 +++
Presentation/LoginPage.php | 1 +
Presentation/chatPage.php | 1 +
Presentation/chatbotpage.php | 1 +
Presentation/city.php | 3 +
Presentation/interface.php | 1 +
Presentation/map.php | 2 +
Presentation/register.php | 2 +
Presentation/settings.php | 2 +
10 files changed, 174 insertions(+)
create mode 100644 Logic/city.js
create mode 100644 Logic/translate.php
diff --git a/Logic/city.js b/Logic/city.js
new file mode 100644
index 0000000..48ee79a
--- /dev/null
+++ b/Logic/city.js
@@ -0,0 +1,149 @@
+let map;
+let schoolOverlay;
+
+function loadGoogleMapsAPI() {
+ // 创建一个script元素
+ var script = document.createElement('script');
+ script.type = 'text/javascript';
+ script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDK6Mv_YWM0M2iOFuqjB2YWQrYPbKvpGJU&libraries=places&callback=initMap';
+ script.async = true;
+ script.defer = true;
+ document.body.appendChild(script);
+}
+
+loadGoogleMapsAPI();
+
+function initMap() {
+ const schoolLatLng = {lat: 51.50070917690589, lng: -2.5474203036155645}; // 更换为你学校的实际经纬度
+ map = new google.maps.Map(document.getElementById('map'), {
+ zoom: 18,
+ center: schoolLatLng,
+ restriction: {
+ latLngBounds: {
+ north: 51.545302312719976, // 调整为实际的北边界纬度
+ south: 51.39364543097778, // 调整为实际的南边界纬度
+ east: -2.452456079577689, // 调整为实际的东边界经度
+ west: -2.7293783311528226 // 调整为实际的西边界经度
+ },
+ strictBounds: true, // 当设置为true时，用户不能滚动到限制之外
+ }
+ });
+
+ //获取用户位置
+ if (navigator.geolocation) {
+ navigator.geolocation.watchPosition((position) => {
+ const userLocation = {
+ lat: position.coords.latitude,
+ lng: position.coords.longitude
+ };
+ const userMarker = new google.maps.Marker({
+ position: userLocation,
+ map: map,
+ title: 'Your Location',
+ icon: {
+ url: 'http://localhost/zhushou/Data/woman.png', // 用户位置的自定义图标
+ scaledSize: new google.maps.Size(30, 30)
+ }
+ });
+ map.setCenter(userLocation);
+ }, () => {
+ handleLocationError(true, map.getCenter());
+ }, {
+ enableHighAccuracy: true, // 启用高精度模式
+ timeout: 10000, // 最长等待时间
+ maximumAge: 0 // 不接受缓存的位置
+ });
+ } else {
+ handleLocationError(false, map.getCenter());
+ }
+
+
+ //以下代码为了搜索地点
+ const input = document.getElementById('place-search');
+ const searchBox = new google.maps.places.SearchBox(input);
+
+ map.addListener('bounds_changed', function () {
+ searchBox.setBounds(map.getBounds());
+ });
+
+ let markers = [];
+ // 监听搜索框的结果
+ searchBox.addListener('places_changed', function () {
+ const places = searchBox.getPlaces();
+
+ if (places.length == 0) {
+ return;
+ }
+
+ // 清除旧的标记
+ markers.forEach(marker => marker.setMap(null));
+ markers = [];
+
+ // 为每个地点创建一个新标记
+ const bounds = new google.maps.LatLngBounds();
+ places.forEach(place => {
+ if (!place.geometry || !place.geometry.location) {
+ console.log("Returned place contains no geometry");
+ return;
+ }
+
+ markers.push(new google.maps.Marker({
+ map: map,
+ title: place.name,
+ position: place.geometry.location,
+ icon: {
+ url: 'location-pin.png',
+ scaledSize: new google.maps.Size(40, 40) // 可选：调整图标大小
+ }
+ }));
+
+ if (place.geometry.viewport) {
+ // 如果地点具有视口，则使用该视口
+ bounds.union(place.geometry.viewport);
+ } else {
+ bounds.extend(place.geometry.location);
+ }
+ });
+ map.fitBounds(bounds);
+ });
+
+ //查找特定地点
+ document.querySelectorAll('.place-btn').forEach(button => {
+ button.addEventListener('click', function () {
+ const name = this.getAttribute('data-name');
+ const lat = parseFloat(this.dataset.lat);
+ const lng = parseFloat(this.dataset.lng);
+
+ const openTime = this.getAttribute('data-opentime');
+ const description = this.getAttribute('data-description');
+ const address = this.getAttribute('data-address');
+
+ // 清除现有的标记
+ markers.forEach(marker => marker.setMap(null));
+ markers = [];
+
+ const location = new google.maps.LatLng(lat, lng);
+ const marker = new google.maps.Marker({
+ position: location,
+ map: map,
+ title: name
+ });
+ markers.push(marker);
+
+ // 更新地图中心
+ map.setCenter(location);
+
+ // 更新地点信息
+ const infoContent = '<h3>' + name + '</h3><br>' + '<h3>Opening Time:</h3><br>' + '<p>' + openTime + '</p><br>' + '<h3>Details:</h3>' + '<p>' + description + '</p>' + '<h3>Address:</h3>' + '<p>' + address + '</p>';
+ document.getElementById('place-info').innerHTML = infoContent;
+ });
+ });
+
+}
+
+
+
+
+
+
+
diff --git a/Logic/translate.php b/Logic/translate.php
new file mode 100644
index 0000000..0c437c0
--- /dev/null
+++ b/Logic/translate.php
@@ -0,0 +1,12 @@
+<div id="google_translate_element" style="position: fixed; top: 0; right: 0; background-color: #232533; color: #FFFFFF; padding: 10px; z-index: 1000;"></div>
+<script type="text/javascript">
+ function googleTranslateElementInit() {
+ new google.translate.TranslateElement({
+ pageLanguage: 'en',//网页的语言
+ layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT,
+ includedLanguages: 'en,zh-CN'},//可以翻译的语言，这里是可选的，默认是全部语言
+ 'google_translate_element'
+ );
+ }
+</script>
+<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
diff --git a/Presentation/LoginPage.php b/Presentation/LoginPage.php
index 114a62a..4c6b0ef 100644
--- a/Presentation/LoginPage.php
+++ b/Presentation/LoginPage.php
@@ -63,6 +63,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<link rel="stylesheet" href="../css/LoginPage.css">
</head>
<body>
+<?php include '../Logic/translate.php'; ?>
<div class="login-container">
<h2 class="background-text">UWE Student Assistant</h2>
<form id="loginForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
diff --git a/Presentation/chatPage.php b/Presentation/chatPage.php
index fc52bc1..228d664 100644
--- a/Presentation/chatPage.php
+++ b/Presentation/chatPage.php
@@ -9,6 +9,7 @@
<link rel="stylesheet" href="../css/chatPage.css">
</head>
<body>
+<?php include '../Logic/translate.php'; ?>
<!-- 在线用户列表容器 -->
<div id="sidebar">
<h2>在线用户:</h2>
diff --git a/Presentation/chatbotpage.php b/Presentation/chatbotpage.php
index d6647e7..4cf79b9 100644
--- a/Presentation/chatbotpage.php
+++ b/Presentation/chatbotpage.php
@@ -42,6 +42,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
<link rel="stylesheet" href="../css/chatbotpage.css">
</head>
<body>
+<?php include '../Logic/translate.php'; ?>
<div id="chat-container">
<div id="chat-history">
<?php if (!empty($_SESSION['chat_history'])): ?>
diff --git a/Presentation/city.php b/Presentation/city.php
index 6733e5a..52b8aaa 100644
--- a/Presentation/city.php
+++ b/Presentation/city.php
@@ -15,6 +15,7 @@ $buildings = $stmt->fetchAll(PDO::FETCH_ASSOC);
<link rel="stylesheet" href="../css/city.css">
</head>
<body>
+<?php include '../Logic/translate.php'; ?>
<div id="map" style="height: 500px; width: 100%;"></div>
<div id="place-search-bar">
@@ -100,6 +101,8 @@ $buildings = $stmt->fetchAll(PDO::FETCH_ASSOC);
</tr>
</tbody>
</table>
+
+ <div id="google_translate_element"></div>
</div>
diff --git a/Presentation/interface.php b/Presentation/interface.php
index d5aec7a..cc3591f 100644
--- a/Presentation/interface.php
+++ b/Presentation/interface.php
@@ -23,6 +23,7 @@
<link rel="stylesheet" href="../css/interface.css">
</head>
<body>
+<?php include '../Logic/translate.php'; ?>
<div id="appContainer">
diff --git a/Presentation/map.php b/Presentation/map.php
index 0a6fc58..8240a3c 100644
--- a/Presentation/map.php
+++ b/Presentation/map.php
@@ -15,6 +15,8 @@ $buildings = $stmt->fetchAll(PDO::FETCH_ASSOC);
<link rel="stylesheet" href="../css/map.css">
</head>
<body>
+<?php include '../Logic/translate.php'; ?>
+
<div id="map" style="height: 500px; width: 100%;"></div>
<div id="place-search-bar">
diff --git a/Presentation/register.php b/Presentation/register.php
index 3e21a30..df39bfa 100644
--- a/Presentation/register.php
+++ b/Presentation/register.php
@@ -76,6 +76,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<link rel="stylesheet" href="../css/register.css">
</head>
<body>
+<?php include '../Logic/translate.php'; ?>
+
<div class="container">
<div class="left">
<div class="left-content">
diff --git a/Presentation/settings.php b/Presentation/settings.php
index ab036d2..be95dff 100644
--- a/Presentation/settings.php
+++ b/Presentation/settings.php
@@ -68,6 +68,8 @@ $user = $stmt->fetch(PDO::FETCH_ASSOC);
<link rel="stylesheet" href="../css/settings.css">
</head>
<body>
+<?php include '../Logic/translate.php'; ?>
+
<div class="container">
<div id="topbar">
--
GitLab