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 {
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -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定位结果');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user