Where are we

/* — 1. CSS 样式设计 — */

/* 全局设置：确保页面全屏，无边距 */
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
color: #333;
}

/* 布局容器：使用 Flexbox 实现左右分栏 */
.container {
display: flex;
height: 100vh; /* 占满视口高度 */
width: 100%;
}

/* 左侧：地图区域 (占 65%) */
#map {
flex: 65%;
height: 100%;
}

/* 右侧：表单区域 (占 35%) */
.form-sidebar {
flex: 35%;
background-color: #f8f9fa;
padding: 30px;
overflow-y: auto; /* 内容过多时允许滚动 */
box-shadow: -2px 0 10px rgba(0,0,0,0.1); /* 左侧阴影，增加层次感 */
z-index: 10;
}

/* 表单内部样式 */
.form-sidebar h2 {
margin-top: 0;
color: #1a73e8; /* Google Blue */
}

.instructions {
font-size: 14px;
color: #666;
background: #e8f0fe;
padding: 10px;
border-radius: 4px;
margin-bottom: 20px;
border-left: 4px solid #1a73e8;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}

/* 输入框样式 */
.form-control {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box; /* 包含padding在宽度内 */
transition: border-color 0.3s;
}

.form-control:focus {
border-color: #1a73e8;
outline: none;
}

/* 只读输入框样式 (坐标) */
input[readonly] {
background-color: #e9ecef;
cursor: not-allowed;
color: #555;
font-family: monospace; /* 等宽字体显示数字更整齐 */
}

/* 坐标行布局 */
.coords-row {
display: flex;
gap: 10px;
}

/* 提交按钮 */
.btn-submit {
width: 100%;
padding: 14px;
background-color: #1a73e8;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
}

.btn-submit:hover {
background-color: #1557b0;
}

/* — 响应式设计：手机端变为上下布局 — */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
#map {
height: 50vh; /* 地图占一半高度 */
flex: none;
}
.form-sidebar {
height: 50vh; /* 表单占一半高度 */
flex: none;
}
}

let map;
let marker; // 用于存储当前地图上的标记

// 地图初始化函数 (由 API URL 中的 callback=initMap 调用)
function initMap() {
// 默认中心点 (示例：北京天安门)
const initialLocation = { lat: 39.9042, lng: 116.4074 };

// 创建地图实例
map = new google.maps.Map(document.getElementById(“map”), {
zoom: 14,
center: initialLocation,
mapTypeControl: false, // 简化界面，隐藏地图类型控件
streetViewControl: false, // 隐藏街景控件
fullscreenControl: true
});

// — 核心逻辑：监听地图点击事件 —
map.addListener(“click”, (e) => {
placeMarker(e.latLng);
});
}

// 放置标记并填充表单的函数
function placeMarker(latLng) {
// 1. 如果地图上已经有标记，先移除旧的 (保证地图上只有一个选点)
if (marker) {
marker.setMap(null);
}

// 2. 在点击位置添加新标记
marker = new google.maps.Marker({
position: latLng,
map: map,
animation: google.maps.Animation.DROP // 添加掉落动画
});

// 3. 将地图中心移动到点击位置
map.panTo(latLng);

// 4. 将坐标填入右侧表单 (保留6位小数)
document.getElementById(“lat”).value = latLng.lat().toFixed(6);
document.getElementById(“lng”).value = latLng.lng().toFixed(6);
}

// 表单提交模拟
document.getElementById(“infoForm”).addEventListener(“submit”, function(event) {
event.preventDefault(); // 阻止表单默认跳转

// 获取数据
const formData = {
name: document.getElementById(“locationName”).value,
category: document.getElementById(“category”).value,
lat: document.getElementById(“lat”).value,
lng: document.getElementById(“lng”).value,
desc: document.getElementById(“description”).value
};

// 检查是否选择了坐标
if (!formData.lat || !formData.lng) {
alert(“请先在地图上点击选择一个位置！”);
return;
}

// 在控制台打印数据 (实际开发中这里会发送 Ajax/Fetch 请求给后端)
console.log(“提交的数据:”, formData);

// 模拟提交成功反馈
alert(“提交成功！\n\n地点：” + formData.name + “\n坐标：[” + formData.lat + “, ” + formData.lng + “]”);

// 清空表单
this.reset();
// 移除地图上的标记
if (marker) marker.setMap(null);
});