Enhance location features in the map application: update README for automatic location detection, adjust CSS for mobile geolocation controls, and improve JavaScript for IP and precise geolocation handling.

This commit is contained in:
Ethanfly 2026-01-12 12:29:57 +08:00
parent 2791045e62
commit 2b9c763f95
4 changed files with 45 additions and 7 deletions

View File

@ -8,7 +8,8 @@
- 通过地址搜索添加位置(支持输入提示和自动补全)
- 直接在地图上点击添加位置(无需确认,即点即加)
- 支持删除和管理已添加的位置
- 启动时自动 IP 定位到当前城市
- 启动时自动定位(先 IP 定位快速显示,再精确定位)
- 右下角定位按钮可随时重新定位
- **🎯 智能中心计算**
- 使用球面几何算法计算多点中心

View File

@ -2107,3 +2107,18 @@ ul {
.amap-info-close {
font-size: 16px !important;
}
/* 高德定位控件位置调整 - 移动端避免被底部栏遮挡 */
@media (max-width: 768px) {
.amap-geolocation-con {
bottom: 140px !important;
right: 16px !important;
}
/* 缩放控件也上移 */
.amap-zoom-touch-minus,
.amap-zoom-touch-plus,
.amap-zoomcontrol {
bottom: 200px !important;
}
}

View File

@ -300,17 +300,39 @@ function initMap() {
// 地图点击事件
state.map.on('click', handleMapClick);
// 使用高德IP定位只定位地图中心不自动添加位置
AMap.plugin('AMap.CitySearch', () => {
// 先IP定位快速显示再尝试精确定位
AMap.plugin(['AMap.CitySearch', 'AMap.Geolocation'], () => {
// 1. 先IP定位快速
const citySearch = new AMap.CitySearch();
citySearch.getLocalCity((status, result) => {
if (status === 'complete' && result.info === 'OK') {
// IP定位成功将地图移动到当前城市
const bounds = result.bounds;
if (bounds) {
state.map.setBounds(bounds);
}
console.log('已定位到城市:', result.city);
console.log('IP定位成功城市:', result.city);
}
});
// 2. 然后尝试精确定位(较慢但更准确)
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true,
timeout: 10000,
buttonPosition: 'RB',
buttonOffset: new AMap.Pixel(10, 20),
zoomToAccuracy: true
});
// 添加定位控件到地图
state.map.addControl(geolocation);
geolocation.getCurrentPosition((status, result) => {
if (status === 'complete' && result.position) {
state.map.setCenter(result.position);
state.map.setZoom(15);
console.log('精确定位成功:', result.formattedAddress);
} else {
console.log('精确定位失败使用IP定位结果');
}
});
});

View File

@ -7,7 +7,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#0f0f1a">
<title>会面点 - 寻找最佳聚会地点</title>
<link rel="stylesheet" href="/static/css/style.css?v=20260112d">
<link rel="stylesheet" href="/static/css/style.css?v=20260112f">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
@ -179,6 +179,6 @@
</div>
<!-- 应用脚本 -->
<script src="/static/js/app.js?v=20260112h"></script>
<script src="/static/js/app.js?v=20260112i"></script>
</body>
</html>