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 { .amap-info-close {
font-size: 16px !important; 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); state.map.on('click', handleMapClick);
// 使用高德IP定位只定位地图中心不自动添加位置 // 先IP定位快速显示再尝试精确定位
AMap.plugin('AMap.CitySearch', () => { AMap.plugin(['AMap.CitySearch', 'AMap.Geolocation'], () => {
// 1. 先IP定位快速
const citySearch = new AMap.CitySearch(); const citySearch = new AMap.CitySearch();
citySearch.getLocalCity((status, result) => { citySearch.getLocalCity((status, result) => {
if (status === 'complete' && result.info === 'OK') { if (status === 'complete' && result.info === 'OK') {
// IP定位成功将地图移动到当前城市
const bounds = result.bounds; const bounds = result.bounds;
if (bounds) { if (bounds) {
state.map.setBounds(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="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#0f0f1a"> <meta name="theme-color" content="#0f0f1a">
<title>会面点 - 寻找最佳聚会地点</title> <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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <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> </div>
<!-- 应用脚本 --> <!-- 应用脚本 -->
<script src="/static/js/app.js?v=20260112h"></script> <script src="/static/js/app.js?v=20260112i"></script>
</body> </body>
</html> </html>