优化SelectMap组件,更新IP定位服务的实现,增强错误处理逻辑,确保用户位置获取更加准确和稳定,同时调整样式以提升用户体验。
This commit is contained in:
@@ -8,10 +8,13 @@
|
||||
.searchArea {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.searchResults {
|
||||
@@ -19,7 +22,7 @@
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
z-index: 10001;
|
||||
background: #fff;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 4px;
|
||||
@@ -27,6 +30,7 @@
|
||||
margin-top: 4px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
pointer-events: auto;
|
||||
|
||||
:global(.ant-list-item) {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -8,7 +8,7 @@ import styles from "./selectMap.module.scss";
|
||||
declare global {
|
||||
interface Window {
|
||||
TMap: any;
|
||||
geolocationRef: any; // 全局IP定位服务引用
|
||||
geolocationRef: any; // 全局IP定位服务引用(TMap.service.IPLocation实例)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,8 +117,8 @@ const SelectMap: React.FC<SelectMapProps> = ({
|
||||
// 创建地理编码服务(用于反向地理编码)
|
||||
geocoderRef.current = new window.TMap.service.Geocoder();
|
||||
|
||||
// 使用腾讯地图内置的定位服务
|
||||
window.geolocationRef = window.TMap.service.Geolocation;
|
||||
// 创建IP定位服务
|
||||
window.geolocationRef = new window.TMap.service.IPLocation();
|
||||
|
||||
// 创建搜索建议服务
|
||||
suggestServiceRef.current = new window.TMap.service.Suggestion({
|
||||
@@ -327,13 +327,13 @@ const SelectMap: React.FC<SelectMapProps> = ({
|
||||
setIsLocating(true);
|
||||
try {
|
||||
if (window.geolocationRef) {
|
||||
window.geolocationRef.getLocation({
|
||||
timeout: 10000,
|
||||
convert: true,
|
||||
success: function (result: any) {
|
||||
window.geolocationRef
|
||||
.locate()
|
||||
.then((result: any) => {
|
||||
setIsLocating(false);
|
||||
if (result && result.location) {
|
||||
const { lat, lng } = result.location;
|
||||
console.log("IP定位结果:", result);
|
||||
if (result && result.result && result.result.location) {
|
||||
const { lat, lng } = result.result.location;
|
||||
message.info("已定位到您的大致位置");
|
||||
initializeUserLocation(lat, lng, false);
|
||||
} else {
|
||||
@@ -342,16 +342,16 @@ const SelectMap: React.FC<SelectMapProps> = ({
|
||||
// 使用默认位置(北京市)
|
||||
initializeUserLocation(39.908823, 116.39747, true);
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
})
|
||||
.catch((error: any) => {
|
||||
setIsLocating(false);
|
||||
console.error("IP定位失败:", error);
|
||||
message.info("无法获取您的位置,已定位到北京");
|
||||
// 使用默认位置(北京市)
|
||||
initializeUserLocation(39.908823, 116.39747, true);
|
||||
},
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// 地理编码服务未初始化:使用默认位置
|
||||
// IP定位服务未初始化:使用默认位置
|
||||
setIsLocating(false);
|
||||
message.info("无法获取您的位置,已定位到北京");
|
||||
// 使用默认位置(北京市)
|
||||
|
||||
Reference in New Issue
Block a user