Skip to content

W
web
提交 ee1b67e7 作者: ZhangLingKun
操作

功能：用户定位展示（IP位置）

上级 328e197f
流水线 #7302 已通过 于阶段
in 5 分 2 秒
正在显示 包含 387 行增加 和 11 行删除
package.json
......@@ -20,6 +20,7 @@
"@amap/amap-jsapi-loader": "^1.0.1",
"@ant-design/cssinjs": "^1.17.2",
"@ant-design/icons": "^5.2.6",
"@reduxjs/toolkit": "^1.9.7",
"@types/styled-components": "^5.1.29",
"antd": "^5.11.0",
"axios": "^1.6.0",
......@@ -30,9 +31,13 @@
"js-base64": "^3.7.5",
"js-cookie": "^3.0.5",
"next": "14.0.1",
"next-redux-wrapper": "^8.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-infinite-scroll-component": "^6.1.0",
"react-redux": "^8.1.3",
"redux": "^4.2.1",
"redux-persist": "^6.0.0",
"styled-components": "^6.1.0"
},
"devDependencies": {
......
pnpm-lock.yaml
......@@ -14,6 +14,9 @@ dependencies:
'@ant-design/icons':
specifier: ^5.2.6
version: registry.npmmirror.com/@ant-design/icons@5.2.6(react-dom@18.2.0)(react@18.2.0)
'@reduxjs/toolkit':
specifier: ^1.9.7
version: registry.npmmirror.com/@reduxjs/toolkit@1.9.7(react-redux@8.1.3)(react@18.2.0)
'@types/styled-components':
specifier: ^5.1.29
version: registry.npmmirror.com/@types/styled-components@5.1.29
......@@ -44,6 +47,9 @@ dependencies:
next:
specifier: 14.0.1
version: registry.npmmirror.com/next@14.0.1(@babel/core@7.23.2)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5)
next-redux-wrapper:
specifier: ^8.1.0
version: registry.npmmirror.com/next-redux-wrapper@8.1.0(next@14.0.1)(react-redux@8.1.3)(react@18.2.0)
react:
specifier: ^18.2.0
version: registry.npmmirror.com/react@18.2.0
......@@ -53,6 +59,15 @@ dependencies:
react-infinite-scroll-component:
specifier: ^6.1.0
version: registry.npmmirror.com/react-infinite-scroll-component@6.1.0(react@18.2.0)
react-redux:
specifier: ^8.1.3
version: registry.npmmirror.com/react-redux@8.1.3(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1)
redux:
specifier: ^4.2.1
version: registry.npmmirror.com/redux@4.2.1
redux-persist:
specifier: ^6.0.0
version: registry.npmmirror.com/redux-persist@6.0.0(react@18.2.0)(redux@4.2.1)
styled-components:
specifier: ^6.1.0
version: registry.npmmirror.com/styled-components@6.1.0(react-dom@18.2.0)(react@18.2.0)
......@@ -887,6 +902,28 @@ packages:
react-dom: registry.npmmirror.com/react-dom@18.2.0(react@18.2.0)
dev: false
registry.npmmirror.com/@reduxjs/toolkit@1.9.7(react-redux@8.1.3)(react@18.2.0):
resolution: {integrity: sha512-t7v8ZPxhhKgOKtU+uyJT13lu4vL7az5aFi4IdoDs/eS548edn2M8Ik9h8fxgvMjGoAUVFSt6ZC1P5cWmQ014QQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@reduxjs/toolkit/-/toolkit-1.9.7.tgz}
id: registry.npmmirror.com/@reduxjs/toolkit/1.9.7
name: '@reduxjs/toolkit'
version: 1.9.7
peerDependencies:
react: ^16.9.0 || ^17.0.0 || ^18
react-redux: ^7.2.1 || ^8.0.2
peerDependenciesMeta:
react:
optional: true
react-redux:
optional: true
dependencies:
immer: registry.npmmirror.com/immer@9.0.21
react: registry.npmmirror.com/react@18.2.0
react-redux: registry.npmmirror.com/react-redux@8.1.3(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1)
redux: registry.npmmirror.com/redux@4.2.1
redux-thunk: registry.npmmirror.com/redux-thunk@2.4.2(redux@4.2.1)
reselect: registry.npmmirror.com/reselect@4.1.8
dev: false
registry.npmmirror.com/@rushstack/eslint-patch@1.5.1:
resolution: {integrity: sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz}
name: '@rushstack/eslint-patch'
......@@ -951,7 +988,6 @@ packages:
version: 18.2.15
dependencies:
'@types/react': registry.npmmirror.com/@types/react@18.2.37
dev: true
registry.npmmirror.com/@types/react@18.2.37:
resolution: {integrity: sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/react/-/react-18.2.37.tgz}
......@@ -989,6 +1025,12 @@ packages:
version: 4.2.2
dev: false
registry.npmmirror.com/@types/use-sync-external-store@0.0.3:
resolution: {integrity: sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz}
name: '@types/use-sync-external-store'
version: 0.0.3
dev: false
registry.npmmirror.com/@typescript-eslint/eslint-plugin@6.10.0(@typescript-eslint/parser@6.10.0)(eslint@8.0.0)(typescript@5.0.2):
resolution: {integrity: sha512-uoLj4g2OTL8rfUQVx2AFO1hp/zja1wABJq77P6IclQs6I/m9GLrm7jCdgzZkvWdDCQf1uEvoa8s8CupsgWQgVg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.10.0.tgz}
id: registry.npmmirror.com/@typescript-eslint/eslint-plugin/6.10.0
......@@ -2911,6 +2953,12 @@ packages:
engines: {node: '>= 4'}
dev: true
registry.npmmirror.com/immer@9.0.21:
resolution: {integrity: sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/immer/-/immer-9.0.21.tgz}
name: immer
version: 9.0.21
dev: false
registry.npmmirror.com/immutable@4.3.4:
resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/immutable/-/immutable-4.3.4.tgz}
name: immutable
......@@ -3485,6 +3533,21 @@ packages:
version: 1.4.0
dev: true
registry.npmmirror.com/next-redux-wrapper@8.1.0(next@14.0.1)(react-redux@8.1.3)(react@18.2.0):
resolution: {integrity: sha512-2hIau0hcI6uQszOtrvAFqgc0NkZegKYhBB7ZAKiG3jk7zfuQb4E7OV9jfxViqqojh3SEHdnFfPkN9KErttUKuw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/next-redux-wrapper/-/next-redux-wrapper-8.1.0.tgz}
id: registry.npmmirror.com/next-redux-wrapper/8.1.0
name: next-redux-wrapper
version: 8.1.0
peerDependencies:
next: '>=9'
react: '*'
react-redux: '*'
dependencies:
next: registry.npmmirror.com/next@14.0.1(@babel/core@7.23.2)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5)
react: registry.npmmirror.com/react@18.2.0
react-redux: registry.npmmirror.com/react-redux@8.1.3(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1)
dev: false
registry.npmmirror.com/next@14.0.1(@babel/core@7.23.2)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5):
resolution: {integrity: sha512-s4YaLpE4b0gmb3ggtmpmV+wt+lPRuGtANzojMQ2+gmBpgX9w5fTbjsy6dXByBuENsdCX5pukZH/GxdFgO62+pA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/next/-/next-14.0.1.tgz}
id: registry.npmmirror.com/next/14.0.1
......@@ -4484,6 +4547,43 @@ packages:
version: 18.2.0
dev: false
registry.npmmirror.com/react-redux@8.1.3(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1):
resolution: {integrity: sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-redux/-/react-redux-8.1.3.tgz}
id: registry.npmmirror.com/react-redux/8.1.3
name: react-redux
version: 8.1.3
peerDependencies:
'@types/react': ^16.8 || ^17.0 || ^18.0
'@types/react-dom': ^16.8 || ^17.0 || ^18.0
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
react-native: '>=0.59'
redux: ^4 || ^5.0.0-beta.0
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
react-dom:
optional: true
react-native:
optional: true
redux:
optional: true
dependencies:
'@babel/runtime': registry.npmmirror.com/@babel/runtime@7.23.2
'@types/hoist-non-react-statics': registry.npmmirror.com/@types/hoist-non-react-statics@3.3.4
'@types/react': registry.npmmirror.com/@types/react@18.2.37
'@types/react-dom': registry.npmmirror.com/@types/react-dom@18.2.15
'@types/use-sync-external-store': registry.npmmirror.com/@types/use-sync-external-store@0.0.3
hoist-non-react-statics: registry.npmmirror.com/hoist-non-react-statics@3.3.2
react: registry.npmmirror.com/react@18.2.0
react-dom: registry.npmmirror.com/react-dom@18.2.0(react@18.2.0)
react-is: registry.npmmirror.com/react-is@18.2.0
redux: registry.npmmirror.com/redux@4.2.1
use-sync-external-store: registry.npmmirror.com/use-sync-external-store@1.2.0(react@18.2.0)
dev: false
registry.npmmirror.com/react@18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react/-/react-18.2.0.tgz}
name: react
......@@ -4501,6 +4601,41 @@ packages:
dependencies:
picomatch: registry.npmmirror.com/picomatch@2.3.1
registry.npmmirror.com/redux-persist@6.0.0(react@18.2.0)(redux@4.2.1):
resolution: {integrity: sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/redux-persist/-/redux-persist-6.0.0.tgz}
id: registry.npmmirror.com/redux-persist/6.0.0
name: redux-persist
version: 6.0.0
peerDependencies:
react: '>=16'
redux: '>4.0.0'
peerDependenciesMeta:
react:
optional: true
dependencies:
react: registry.npmmirror.com/react@18.2.0
redux: registry.npmmirror.com/redux@4.2.1
dev: false
registry.npmmirror.com/redux-thunk@2.4.2(redux@4.2.1):
resolution: {integrity: sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/redux-thunk/-/redux-thunk-2.4.2.tgz}
id: registry.npmmirror.com/redux-thunk/2.4.2
name: redux-thunk
version: 2.4.2
peerDependencies:
redux: ^4
dependencies:
redux: registry.npmmirror.com/redux@4.2.1
dev: false
registry.npmmirror.com/redux@4.2.1:
resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/redux/-/redux-4.2.1.tgz}
name: redux
version: 4.2.1
dependencies:
'@babel/runtime': registry.npmmirror.com/@babel/runtime@7.23.2
dev: false
registry.npmmirror.com/reflect.getprototypeof@1.0.4:
resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz}
name: reflect.getprototypeof
......@@ -4538,6 +4673,12 @@ packages:
engines: {node: '>=8'}
dev: true
registry.npmmirror.com/reselect@4.1.8:
resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/reselect/-/reselect-4.1.8.tgz}
name: reselect
version: 4.1.8
dev: false
registry.npmmirror.com/resize-observer-polyfill@1.5.1:
resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz}
name: resize-observer-polyfill
......@@ -5124,6 +5265,17 @@ packages:
punycode: registry.npmmirror.com/punycode@2.3.1
dev: true
registry.npmmirror.com/use-sync-external-store@1.2.0(react@18.2.0):
resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz}
id: registry.npmmirror.com/use-sync-external-store/1.2.0
name: use-sync-external-store
version: 1.2.0
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
dependencies:
react: registry.npmmirror.com/react@18.2.0
dev: false
registry.npmmirror.com/v8-compile-cache@2.4.0:
resolution: {integrity: sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz}
name: v8-compile-cache
......
src/components/layout/header/index.tsx
......@@ -2,7 +2,11 @@ import React, { useEffect } from 'react';
import { EnvironmentFilled } from '@ant-design/icons';
import { Button } from 'antd';
import { useRouter } from 'next/router';
import { useDispatch, useSelector } from 'react-redux';
import { HeaderWrap } from '@/components/layout/header/styled';
import { RootState } from '@/store';
import { AddressState, setAddress } from '@/store/address';
import getLocationByIP from '@/utils/getLocationByIP';
const HeaderView: React.FC<{
placeholder?: boolean;
......@@ -12,9 +16,19 @@ const HeaderView: React.FC<{
};
// 当前的路由数据
const router = useRouter();
// store
const dispatch = useDispatch();
// address
const address = useSelector(
(state: RootState) => state.address,
) as AddressState;
// 组件挂载
useEffect(() => {
console.log('HeaderView --->', router);
// console.log('HeaderView --->', router);
getLocationByIP().then((res) => {
dispatch(setAddress(res));
});
console.log('address --->', address);
}, [router]);
return (
<HeaderWrap>
......@@ -26,9 +40,9 @@ const HeaderView: React.FC<{
/>
</div>
<Button type={'link'} className="location-address">
杭州
{address?.city || '定位中...'}
</Button>
<div className="location-hello">Hi，欢迎来云享飞</div>
<div className="location-hello">Hi，欢迎来到云享飞</div>
</div>
<div className="header-nav">
<div className="nav-tab">
......
src/components/map/index.tsx
......@@ -2,7 +2,8 @@ import { FC, useEffect } from 'react';
const MapContainer: FC<{
list: { lat: number; lon: number; name: string }[];
}> = ({ list }) => {
center?: [number, number];
}> = ({ list, center }) => {
// 地图实例
let map: any = null;
// 高德地图
......@@ -58,7 +59,7 @@ const MapContainer: FC<{
// 设置地图容器id
viewMode: '3D', // 是否为3D地图模式
zoom: 10, // 初始化地图级别
center: [119.96043, 30.04885], // 初始化地图中心点位置
center: center || [119.96043, 30.04885], // 初始化地图中心点位置
});
// 用户定位
map.plugin('AMap.Geolocation', () => {
......@@ -89,7 +90,7 @@ const MapContainer: FC<{
return () => {
map?.destroy();
};
}, [list]);
}, [list, center]);
return (
<div
id="container"
......
src/pages/_app.tsx
import React from 'react';
import { ConfigProvider, theme } from 'antd';
// eslint-disable-next-line import/order
import type { AppProps } from 'next/app';
import '../styles/animate.css';
import '../styles/globals.css';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { wrapper } from '@/store';
import themeConfig from '../theme/themeConfig';
const App = ({ Component, pageProps }: AppProps) => (
const App = ({ Component, pageProps, ...rest }: AppProps) => {
const { store } = wrapper.useWrappedStore(rest);
return (
<Provider store={store}>
{/* eslint-disable-next-line no-underscore-dangle */}
<PersistGate persistor={(store as any)?.__persistor} loading={null}>
<ConfigProvider
theme={{
algorithm: theme.compactAlgorithm,
......@@ -15,6 +23,9 @@ const App = ({ Component, pageProps }: AppProps) => (
>
<Component {...pageProps} />
</ConfigProvider>
);
</PersistGate>
</Provider>
);
};
export default App;
src/pages/home/comp/home-map/index.tsx
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import styled from 'styled-components';
import { HomeAPI } from '@/api';
import MapContainer from '@/components/map';
import { RootState } from '@/store';
import { AddressState } from '@/store/address';
const HomeMapView = () => {
// 选择索引
......@@ -18,6 +21,10 @@ const HomeMapView = () => {
setCurrentIndex(index);
getServiceBitmap().then();
};
// address
const address = useSelector(
(state: RootState) => state.address,
) as AddressState;
// 地图网点列表
const [mapMarkerList, setMapMarkerList] = useState<
{ lat: number; lon: number; name: string }[]
......@@ -46,7 +53,10 @@ const HomeMapView = () => {
}, []);
return (
<HomeMapWrap>
<MapContainer list={mapMarkerList} />
<MapContainer
list={mapMarkerList}
center={[address?.longitude, address?.latitude]}
/>
<div className="map-wrap flex-around">
{networkTypeList?.map((i, j) => (
<div
......
src/store/address.ts 0 → 100644
// user.ts
import { createSlice } from '@reduxjs/toolkit';
import { HYDRATE } from 'next-redux-wrapper';
import { LocationType } from '@/utils/getLocationByIP';
export type AddressState = LocationType;
const initialState: AddressState | {} = {};
const addressSlice = createSlice({
name: 'address',
initialState,
reducers: {
setAddress: (state, action) => {
return action.payload;
},
},
extraReducers: {
// hydrated 用于获取服务端注入的state并选择更新
[HYDRATE]: (state, action) => {
return {
...action.payload.address,
};
},
},
});
export const { setAddress } = addressSlice.actions;
export default addressSlice.reducer;
src/store/index.ts 0 → 100644
// index.ts
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';
import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import addressReducer from './address';
import userReducer from './user';
// 单独创建rootReducer供服务端和客户端创建store使用；
const rootReducer = combineReducers({
user: userReducer,
address: addressReducer,
});
const makeStore = () => {
const isServer = typeof window === 'undefined';
// 区分客户端和服务端，服务端不需要持久存储，客户端存在在localStorage中；
if (isServer) {
return configureStore({
reducer: rootReducer,
devTools: true,
});
}
const persistConfig = {
key: 'SHAREFLY-WEB-STORAGE',
whiteList: ['user', 'address'],
storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = configureStore({
reducer: persistedReducer,
devTools: process.env.NODE_ENV !== 'production',
});
// @ts-ignore 只使用客户端渲染不需要此种做法，只需导出persistor即可；
// eslint-disable-next-line no-underscore-dangle
(store as any).__persistor = persistStore(store);
return store;
};
export type AppStore = ReturnType<typeof makeStore>;
export type RootState = ReturnType<AppStore['getState']>;
export const wrapper = createWrapper(makeStore);
src/store/user.ts 0 → 100644
// user.ts
import { createSlice } from '@reduxjs/toolkit';
import { HYDRATE } from 'next-redux-wrapper';
// @ts-ignore
export type UserState = API.User.UserInfo;
const initialState: UserState = {
username: '', // 示例
avatar: '',
};
const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
setUser: (state, action) => {
return action.payload;
},
},
extraReducers: {
// hydrated 用于获取服务端注入的state并选择更新
[HYDRATE]: (state, action) => {
return {
...action.payload.user,
};
},
},
});
export const { setUser } = userSlice.actions;
export default userSlice.reducer;
src/utils/getLocationByIP.ts 0 → 100644
import { message } from 'antd';
import Axios from 'axios';
// 位置的类型
export interface LocationType {
ip: string;
network: string;
version: string;
city: string;
region: string;
region_code: string;
country: string;
country_name: string;
country_code: string;
country_code_iso3: string;
country_capital: string;
country_tld: string;
continent_code: string;
in_eu: boolean;
postal: null;
latitude: number;
longitude: number;
timezone: string;
utc_offset: string;
country_calling_code: string;
currency: string;
currency_name: string;
languages: string;
country_area: number;
country_population: number;
asn: string;
org: string;
status: string;
info: string;
infocode: string;
province: string;
adcode: string;
rectangle: string;
}
// 根据用户的ip地址获取当前位置
export default function getLocationByIP(): Promise<LocationType> {
return new Promise((resolve, reject) => {
// 用户的ip信息
let ipInfo: LocationType;
// 获取用户的ip信息
const getIPInfo = async () => {
const res = await Axios.get('https://ipapi.co/json/');
if (res && res?.status === 200) {
ipInfo = res.data;
// console.log('获取位置1 --->', ipInfo);
return;
}
message.warning('获取位置失败').then();
};
// 根据ip信息获取位置信息
const getLocationByIPInfo = async () => {
const res = await Axios.get(
`https://restapi.amap.com/v3/ip?key=4f98d03f611b80f95a0ad56b044ffb59&ip=${ipInfo.ip}`,
);
if (res && res?.status === 200) {
const { province, city, adcode, rectangle } = res.data;
ipInfo.province = province;
ipInfo.city = city;
ipInfo.adcode = adcode;
ipInfo.rectangle = rectangle;
// console.log('获取位置 --->', ipInfo);
resolve(ipInfo);
return;
}
message.warning('获取位置失败').then();
reject(ipInfo);
};
// 自执行
(async () => {
await getIPInfo();
await getLocationByIPInfo();
})();
});
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论