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:
parent
2791045e62
commit
2b9c763f95
@ -8,7 +8,8 @@
|
||||
- 通过地址搜索添加位置(支持输入提示和自动补全)
|
||||
- 直接在地图上点击添加位置(无需确认,即点即加)
|
||||
- 支持删除和管理已添加的位置
|
||||
- 启动时自动 IP 定位到当前城市
|
||||
- 启动时自动定位(先 IP 定位快速显示,再精确定位)
|
||||
- 右下角定位按钮可随时重新定位
|
||||
|
||||
- **🎯 智能中心计算**
|
||||
- 使用球面几何算法计算多点中心
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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定位结果');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user