Skip to content

W
web
提交 d9226c99 作者: 曹云
操作

改-首页-无人机保险，无人机工具软件筛选修改显示字段 

改-首页-地图-网点显示字段
添-作业服务-详情-立即预约-地图选点功能
改-筛选组件filter更改选择数量,【作业服务、设备租赁、产品商城】筛选的数据超过一行时需要自动收缩后面未显示的数据，现在未显示完整
改-【首页】无人机出租和无人机服务接口数据对调
改-【设备租赁】选择租期提交意向失败
改-【飞手培训】课程视频查看详情页面需要判断是否授权登录，未授权登录是弹出二维码扫码登录
上级 4c94e718
正在显示 包含 294 行增加 和 75 行删除
components/filter/compoents/typeInfo/index.tsx
...@@ -23,7 +23,7 @@ export default function CategoryItem(props: Props) { ...@@ -23,7 +23,7 @@ export default function CategoryItem(props: Props) {
}) })
} }
const showCount = 14; //展示数量 const showCount = 12 //展示数量
return ( return (
<div className={styles.filterItem}> <div className={styles.filterItem}>
...@@ -37,7 +37,7 @@ export default function CategoryItem(props: Props) { ...@@ -37,7 +37,7 @@ export default function CategoryItem(props: Props) {
ghost ghost
collapsible="icon" collapsible="icon"
expandIconPosition="end" expandIconPosition="end"
style={{ width: "100%" }} style={{ width: '100%' }}
> >
<Collapse.Panel <Collapse.Panel
header={ header={
...@@ -51,7 +51,7 @@ export default function CategoryItem(props: Props) { ...@@ -51,7 +51,7 @@ export default function CategoryItem(props: Props) {
> >
{item.name} {item.name}
</Button> </Button>
); )
})} })}
</Space> </Space>
} }
...@@ -67,12 +67,12 @@ export default function CategoryItem(props: Props) { ...@@ -67,12 +67,12 @@ export default function CategoryItem(props: Props) {
> >
{item.name} {item.name}
</Button> </Button>
); )
})} })}
</Space> </Space>
</Collapse.Panel> </Collapse.Panel>
</Collapse> </Collapse>
</div> </div>
</div> </div>
); )
} }
pages/equipmentLeasing/detail/components/orderForGoods/index.tsx
...@@ -47,25 +47,25 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -47,25 +47,25 @@ export default function OrderForGoods(props: PropsBox) {
if (detailData && shopDetail && list && wareSkuList) { if (detailData && shopDetail && list && wareSkuList) {
const pushList = { const pushList = {
actualPay: actualPay:
discount?.specPrice[0].price! * shopDetail?.num! * days! || 0, discount?.specPrice[0]?.price! * shopDetail?.num! * days! || 0,
deposit: 0, deposit: 0,
endDate: moment(new Date(shopDetail.dateDetail[1])).format( endDate: moment(new Date(shopDetail.dateDetail[1])).format(
'YYYY-MM-DD' 'YYYY-MM-DD'
), ),
orderReceipt: { orderReceipt: {
detailAddress: list[value].takeAddress, detailAddress: list[value]?.takeAddress,
receiptMethod: 0, receiptMethod: 0,
region: list[value].takeRegion, region: list[value].takeRegion,
takeName: list[value].takeName, takeName: list[value].takeName,
takePhone: Number(list[value].takePhone), takePhone: Number(list[value].takePhone),
}, },
rentPrice: rentPrice:
discount?.specPrice[0].price! * shopDetail?.num! * days! || 0, discount?.specPrice[0]?.price! * shopDetail?.num! * days! || 0,
returnDate: moment( returnDate: moment(
new Date(shopDetail.dateDetail[1]).getTime() + 864e5 new Date(shopDetail.dateDetail[1]).getTime() + 864e5
).format('YYYY-MM-DD'), ).format('YYYY-MM-DD'),
shouldPay: shouldPay:
discount?.specPrice[0].price! * shopDetail?.num! * days! || 0, discount?.specPrice[0]?.price! * shopDetail?.num! * days! || 0,
specsId: wareSkuList[0].productSpec, specsId: wareSkuList[0].productSpec,
startDate: moment(new Date(shopDetail.dateDetail[0]!)).format( startDate: moment(new Date(shopDetail.dateDetail[0]!)).format(
'YYYY-MM-DD' 'YYYY-MM-DD'
...@@ -228,7 +228,7 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -228,7 +228,7 @@ export default function OrderForGoods(props: PropsBox) {
</div> </div>
</div> </div>
<div className="body-item" style={{ width: 130 }}> <div className="body-item" style={{ width: 130 }}>
{discount?.specPrice[0].price || 0} {discount?.specPrice[0]?.price || 0}
</div> </div>
<div className="body-item" style={{ width: 130 }}> <div className="body-item" style={{ width: 130 }}>
{shopDetail?.num || 1} {shopDetail?.num || 1}
...@@ -243,7 +243,7 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -243,7 +243,7 @@ export default function OrderForGoods(props: PropsBox) {
)} )}
</div> </div>
<div className="body-item total-price" style={{ width: 135 }}> <div className="body-item total-price" style={{ width: 135 }}>
{discount?.specPrice[0].price! * shopDetail?.num! * days! || 0} {discount?.specPrice[0]?.price! * shopDetail?.num! * days! || 0}
</div> </div>
</div> </div>
</div> </div>
...@@ -282,13 +282,14 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -282,13 +282,14 @@ export default function OrderForGoods(props: PropsBox) {
<div className="top"> <div className="top">
<div className="label">实付款</div> <div className="label">实付款</div>
<div className="price"> <div className="price">
¥{discount?.specPrice[0].price! * shopDetail?.num! * days! || 0} ¥
{discount?.specPrice[0]?.price! * shopDetail?.num! * days! || 0}
</div> </div>
</div> </div>
<div className="bottom"> <div className="bottom">
<div className="value">寄送至</div> <div className="value">寄送至</div>
{list ? ( {list ? (
<div className="value-content">{list![value].takeAddress}</div> <div className="value-content">{list![value]?.takeAddress}</div>
) : null} ) : null}
</div> </div>
</div> </div>
...@@ -321,7 +322,7 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -321,7 +322,7 @@ export default function OrderForGoods(props: PropsBox) {
]} ]}
> >
<div className="title"> <div className="title">
￥{discount?.specPrice[0].price! * shopDetail?.num! * days! || 0} ￥{discount?.specPrice[0]?.price! * shopDetail?.num! * days! || 0}
</div> </div>
<div>云享飞账号： {userInfo?.uid}</div> <div>云享飞账号： {userInfo?.uid}</div>
<div>付款方式： 可用(￥{paymentDetail?.balance})</div> <div>付款方式： 可用(￥{paymentDetail?.balance})</div>
......
pages/home/waterfallFlowBody/components/map/index.tsx
...@@ -92,7 +92,7 @@ export default function MapComponent() { ...@@ -92,7 +92,7 @@ export default function MapComponent() {
const markerList: any = [] const markerList: any = []
if (list?.length) { if (list?.length) {
list?.map((item) => { list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.address) const EntiyValue = addEntiy(item.lon, item.lat, item.name)
markerList.push(EntiyValue) markerList.push(EntiyValue)
}) })
if (markerList.length) MAP?.add(markerList) if (markerList.length) MAP?.add(markerList)
......
pages/home/waterfallFlowBody/components/map/moreServicePoints/index.page.tsx
...@@ -94,7 +94,7 @@ export default function MoreServicePoints() { ...@@ -94,7 +94,7 @@ export default function MoreServicePoints() {
const markerList: any = [] const markerList: any = []
if (list?.length) { if (list?.length) {
list?.map((item) => { list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.address) const EntiyValue = addEntiy(item.lon, item.lat, item.name)
markerList.push(EntiyValue) markerList.push(EntiyValue)
}) })
setServicePoints(list) setServicePoints(list)
...@@ -144,7 +144,7 @@ export default function MoreServicePoints() { ...@@ -144,7 +144,7 @@ export default function MoreServicePoints() {
const markerList: any = [] const markerList: any = []
if (list?.length) { if (list?.length) {
list?.map((item) => { list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.address) const EntiyValue = addEntiy(item.lon, item.lat, item.name)
markerList.push(EntiyValue) markerList.push(EntiyValue)
}) })
setServicePoints(list) setServicePoints(list)
...@@ -215,12 +215,12 @@ export default function MoreServicePoints() { ...@@ -215,12 +215,12 @@ export default function MoreServicePoints() {
var infoWindow = new Amap.InfoWindow({ var infoWindow = new Amap.InfoWindow({
position: p, position: p,
offset: new Amap.Pixel(20, -10), offset: new Amap.Pixel(20, -10),
content: item.dizhi || item.flyerName || item.uavName || item.address, content: item.dizhi || item.flyerName || item.uavName || item.name,
}) })
infoWindow.open(MAP) infoWindow.open(MAP)
if (item.dizhi) { if (item.dizhi) {
return MAP?.setCenter([item.jd, item.wd]) return MAP?.setCenter([item.jd, item.wd])
} else if (item.flyerName || item.uavName || item.address) { } else if (item.flyerName || item.uavName || item.name) {
return MAP?.setCenter([item.lon, item.lat]) return MAP?.setCenter([item.lon, item.lat])
} }
return message.warning('暂无位置信息') return message.warning('暂无位置信息')
...@@ -259,7 +259,7 @@ export default function MoreServicePoints() { ...@@ -259,7 +259,7 @@ export default function MoreServicePoints() {
onClick={() => mapEntiy(3)} onClick={() => mapEntiy(3)}
className={`item ${mapItem === 3 ? 'active' : ''}`} className={`item ${mapItem === 3 ? 'active' : ''}`}
> >
机构网点 维修网点
</div> </div>
</div> </div>
<div className="content"> <div className="content">
...@@ -267,7 +267,7 @@ export default function MoreServicePoints() { ...@@ -267,7 +267,7 @@ export default function MoreServicePoints() {
{mapItem === 0 && <div className="left-title">服务网点</div>} {mapItem === 0 && <div className="left-title">服务网点</div>}
{mapItem === 1 && <div className="left-title">培训网点</div>} {mapItem === 1 && <div className="left-title">培训网点</div>}
{mapItem === 2 && <div className="left-title">租赁网点</div>} {mapItem === 2 && <div className="left-title">租赁网点</div>}
{mapItem === 3 && <div className="left-title">机构网点</div>} {mapItem === 3 && <div className="left-title">维修网点</div>}
<div className="left-content"> <div className="left-content">
{servicePoints.map((item: any, index: number) => ( {servicePoints.map((item: any, index: number) => (
<div <div
...@@ -275,10 +275,10 @@ export default function MoreServicePoints() { ...@@ -275,10 +275,10 @@ export default function MoreServicePoints() {
onClick={() => moveTo(item, index)} onClick={() => moveTo(item, index)}
className="left-content-item" className="left-content-item"
title={ title={
item.dizhi || item.flyerName || item.uavName || item.address item.dizhi || item.flyerName || item.uavName || item.name
} }
> >
{item.dizhi || item.flyerName || item.uavName || item.address} {item.dizhi || item.flyerName || item.uavName || item.name}
</div> </div>
))} ))}
</div> </div>
......
pages/home/waterfallFlowBody/components/map/styled.tsx
import styled from "styled-components"; import styled from 'styled-components'
export default function Style() { export default function Style() {
return <></>; return <></>
} }
export const Box = styled.div` export const Box = styled.div`
...@@ -12,7 +12,7 @@ export const Box = styled.div` ...@@ -12,7 +12,7 @@ export const Box = styled.div`
position: relative; position: relative;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
width: 384px; width: 100%;
height: 220px; height: 220px;
} }
...@@ -46,9 +46,4 @@ export const Box = styled.div` ...@@ -46,9 +46,4 @@ export const Box = styled.div`
color: #ff552d; color: #ff552d;
} }
} }
#container { `
padding: 0px;
margin: 0px;
width: 100%;
}
`;
pages/home/waterfallFlowBody/index.tsx
...@@ -102,28 +102,28 @@ export default function WaterfallFlowBody() { ...@@ -102,28 +102,28 @@ export default function WaterfallFlowBody() {
const [rightTopDomList, setRightTopDomList] = useState<JSX.Element>() const [rightTopDomList, setRightTopDomList] = useState<JSX.Element>()
const [rightBottomDomList, setRightBottomDomList] = useState<JSX.Element>() const [rightBottomDomList, setRightBottomDomList] = useState<JSX.Element>()
const { deviceBrand, deviceModel } = equipmentLeasingApi // const { deviceBrand, deviceModel } = equipmentLeasingApi
const eqApiTypeList = ['brandId', 'categoryId', 'modelId'] // const eqApiTypeList = ['brandId', 'categoryId', 'modelId']
const { // const {
listAllModel, // listAllModel,
listAllBrand, // listAllBrand,
listAllCategory, // listAllCategory,
listAllParts, // listAllParts,
listAllQuality, // listAllQuality,
} = mallApi // } = mallApi
const mallApiTypeList = [ // const mallApiTypeList = [
'brandId', // 'brandId',
'productCategoryId', // 'productCategoryId',
'partsId', // 'partsId',
'modelId', // 'modelId',
'qualityId', // 'qualityId',
] // ]
const { IndustryFlightSkills, InDronePilotLicense } = flightSkillsApi // const { IndustryFlightSkills, InDronePilotLicense } = flightSkillsApi
const flightApiTypeList = ['licenseId', 'flightSkillsId'] // const flightApiTypeList = ['licenseId', 'flightSkillsId']
const { listAllIndustry, listAllAppType } = jobServicesApi // const { listAllIndustry, listAllAppType } = jobServicesApi
const jobApiTypeList = ['industryId', 'appTypeId'] // const jobApiTypeList = ['industryId', 'appTypeId']
const onMoreChange = ( const onMoreChange = (
value: { value: string; label: number }, value: { value: string; label: number },
...@@ -228,35 +228,35 @@ export default function WaterfallFlowBody() { ...@@ -228,35 +228,35 @@ export default function WaterfallFlowBody() {
useEffect(() => { useEffect(() => {
;(async () => { ;(async () => {
const res1 = await api.HomeCategories({ type: 1 }) //无人机出租
const res4 = await api.HomeCategories({ type: 4 }) //无人机销售
const res2 = await api.HomeCategories({ type: 2 }) //无人机培训 const res2 = await api.HomeCategories({ type: 2 }) //无人机培训
const res4 = await api.HomeCategories({ type: 4 }) //无人机销售
const res1 = await api.HomeCategories({ type: 1 }) //无人机出租
const res3 = await api.HomeCategories({ type: 3 }) //无人机服务 const res3 = await api.HomeCategories({ type: 3 }) //无人机服务
console.log(res1, res2, res3, res4) console.log(res1, res2, res3, res4)
const listOption = JSON.parse(JSON.stringify(list)).map( const listOption = JSON.parse(JSON.stringify(list)).map(
(item: string, index: number) => { (item: string, index: number) => {
return { id: index, name: item, value: index } return { id: index, categoryName: item, value: index }
} }
) )
const list2Option = JSON.parse(JSON.stringify(list2)).map( const list2Option = JSON.parse(JSON.stringify(list2)).map(
(item: string, index: number) => { (item: string, index: number) => {
return { id: index, name: item, value: index } return { id: index, categoryName: item, value: index }
} }
) )
const optionList = [ const optionList = [
res1.result, res2.result,
res4.result, res4.result,
listOption, listOption,
res3.result, res3.result,
res2.result, res1.result,
list2Option, list2Option,
] ]
const listValue: any = [ const listValue: any = [
res1.result, res2.result,
res4.result, res4.result,
[], [],
res3.result, res3.result,
res2.result, res1.result,
[], [],
] ]
setLeftDomList( setLeftDomList(
......
pages/jobServices/detail/[id].page.tsx
...@@ -20,6 +20,7 @@ import { useRouter } from 'next/router' ...@@ -20,6 +20,7 @@ import { useRouter } from 'next/router'
import api, { ListPageJobInfoResp } from './api' import api, { ListPageJobInfoResp } from './api'
import Image from 'next/image' import Image from 'next/image'
import { RegionResp } from '~/components/filter/api' import { RegionResp } from '~/components/filter/api'
import AddressMap from './components/map'
const { RangePicker } = DatePicker const { RangePicker } = DatePicker
const { TextArea } = Input const { TextArea } = Input
export default function JobServicesDetail() { export default function JobServicesDetail() {
...@@ -79,6 +80,9 @@ export default function JobServicesDetail() { ...@@ -79,6 +80,9 @@ export default function JobServicesDetail() {
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [areaValue, setAreaValue] = useState<string>() const [areaValue, setAreaValue] = useState<string>()
const [provinceList, setProvinceList] = useState<RegionResp[]>([]) const [provinceList, setProvinceList] = useState<RegionResp[]>([])
const [isAddressMapShow, setIsAddressMapShow] = useState(false)
const [addressContent, setAddressContent] = useState<any>()
useEffect(() => { useEffect(() => {
api.region().then((res) => { api.region().then((res) => {
console.log(res) console.log(res)
...@@ -90,19 +94,27 @@ export default function JobServicesDetail() { ...@@ -90,19 +94,27 @@ export default function JobServicesDetail() {
const disabledDate: RangePickerProps['disabledDate'] = (current) => { const disabledDate: RangePickerProps['disabledDate'] = (current) => {
return current && current < moment().endOf('day') return current && current < moment().endOf('day')
} }
useEffect(() => {
//选择地点后重新验证
formDate.setFieldValue('latitudeAndLongitude', addressContent)
formDate.validateFields()
}, [addressContent])
const handleOk = () => { const handleOk = () => {
setLoading(true) setLoading(true)
formDate formDate
.validateFields() .validateFields()
.then(async (values) => { .then(async (values) => {
console.log(values) console.log(values)
if (!addressContent) {
return message.warning('请选择地点')
}
const res = await api.insertOrderTask({ const res = await api.insertOrderTask({
address: values.address, address: values.address,
city: values.province[1], city: addressContent.city,
inspectionId: detail?.id || 1, inspectionId: detail?.id || 1,
lat: Number(values.lat), lat: addressContent.lat,
lon: Number(values.lon), lon: addressContent.lon,
province: values.province[0], province: addressContent.province,
startTime: moment(new Date(values.dateDetail[0])).format( startTime: moment(new Date(values.dateDetail[0])).format(
'YYYY-MM-DD HH:MM:SS' 'YYYY-MM-DD HH:MM:SS'
), ),
...@@ -114,6 +126,7 @@ export default function JobServicesDetail() { ...@@ -114,6 +126,7 @@ export default function JobServicesDetail() {
if (res.code === '200') { if (res.code === '200') {
message.success('提交成功') message.success('提交成功')
formDate.resetFields() formDate.resetFields()
setAddressContent(undefined)
setLoading(false) setLoading(false)
setIsModalOpen(false) setIsModalOpen(false)
} else { } else {
...@@ -134,15 +147,6 @@ export default function JobServicesDetail() { ...@@ -134,15 +147,6 @@ export default function JobServicesDetail() {
setIsModalOpen(false) setIsModalOpen(false)
formDate.resetFields() formDate.resetFields()
} }
const onchanges = (values: any) => {
if (values) {
const day = new Date(values[1]).getTime() - new Date(values[0]).getTime()
const totalDays = Math.floor(day / (1000 * 3600 * 24))
// setDays(totalDays)
} else {
// setDays(undefined)
}
}
return ( return (
<Layout> <Layout>
...@@ -249,11 +253,10 @@ export default function JobServicesDetail() { ...@@ -249,11 +253,10 @@ export default function JobServicesDetail() {
<RangePicker <RangePicker
style={{ width: 376, marginTop: 10 }} style={{ width: 376, marginTop: 10 }}
disabledDate={disabledDate} disabledDate={disabledDate}
onChange={onchanges}
showTime showTime
/> />
</Form.Item> </Form.Item>
<Form.Item {/* <Form.Item
label="经度" label="经度"
style={{ flex: 1, marginRight: 16 }} style={{ flex: 1, marginRight: 16 }}
name="lon" name="lon"
...@@ -288,6 +291,22 @@ export default function JobServicesDetail() { ...@@ -288,6 +291,22 @@ export default function JobServicesDetail() {
options={provinceList} options={provinceList}
changeOnSelect changeOnSelect
/> />
</Form.Item> */}
<Form.Item
label="选择地点"
style={{ flex: 1, marginRight: 16 }}
name="latitudeAndLongitude"
rules={[{ required: true, message: '请选择地点' }]}
>
{addressContent ? (
<div>
已选择：{addressContent.province + addressContent.city}
</div>
) : (
<Button onClick={() => setIsAddressMapShow(true)} type="text">
点击从地图选择地点
</Button>
)}
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="详细地址" label="详细地址"
...@@ -321,6 +340,26 @@ export default function JobServicesDetail() { ...@@ -321,6 +340,26 @@ export default function JobServicesDetail() {
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>
{isAddressMapShow ? (
<Modal
wrapClassName="reservation"
open={isAddressMapShow}
onCancel={() => setIsAddressMapShow(false)}
getContainer={false}
maskClosable={false}
width={850}
footer={false}
>
<div style={{ textAlign: 'center', fontWeight: '700' }}>
选择地点
</div>
<AddressMap
setAddressContent={setAddressContent}
setIsAddressMapShow={setIsAddressMapShow}
/>
</Modal>
) : null}
</Box> </Box>
</Layout> </Layout>
) )
......
pages/jobServices/detail/components/map/index.tsx 0 → 100644
import React, {
Component,
Dispatch,
SetStateAction,
useEffect,
useState,
} from 'react'
import { message } from 'antd'
import { Box } from './styled'
import { useRouter } from 'next/router'
let MAP: any
let Amap: any
interface UserInfoType {
lat: number
lon: number
pageNo?: number
pageSize?: number
}
interface BoxProps {
setAddressContent: Dispatch<SetStateAction<any>>
setIsAddressMapShow: Dispatch<SetStateAction<boolean>>
}
export default function MapComponent(props: BoxProps) {
const { setAddressContent, setIsAddressMapShow } = props
const router = useRouter()
const [mapItem, setMapItem] = useState(0)
const [userPositioning, setUserPositioning] = useState<UserInfoType>()
const [markerCol, setMarkerCol] = useState<any>([])
//初始化地图
const init = async () => {
try {
const AMapLoader = await import(
/* webpackChunkName: "amap" */ '@amap/amap-jsapi-loader'
)
await AMapLoader.load({
key: '87b424e68754efc3ba9d11ae07475091', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then(async (AMap) => {
Amap = AMap
MAP = new AMap.Map('container', {
// 设置地图容器id
viewMode: '3D', // 是否为3D地图模式
zoom: 9, // 初始化地图级别
center: [113.93029, 22.53291], // 初始化地图中心点位置
})
//用户定位
AMap.plugin('AMap.Geolocation', function () {
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
position: 'RB', //定位按钮的停靠位置
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
})
MAP.addControl(geolocation)
geolocation.getCurrentPosition(function (
status: string,
result: any
) {
if (status == 'complete') {
onComplete(result)
} else {
onError(result)
}
})
})
//解析定位结果
async function onComplete(data: any) {
console.log('定位成功')
setUserPositioning(data.position)
// return await mapEntiy(0,data.position);
}
//解析定位错误信息
async function onError(data: any) {
// message.error(`定位失败
// 失败原因排查信息：${data.message}
// 浏览器返回信息：${data.originMessage}
// `)
}
await mapEntiy(0)
})
.catch((e) => {
console.log(e)
})
} catch (error) {
console.log(error)
}
}
//选择点位
const mapEntiy = async (index: number, data?: UserInfoType) => {
MAP.on('click', mapGet)
setMapItem(index)
}
const mapGet = (e: any) => {
console.log(e)
// 在这里获取点位信息
const lnglat = e.lnglat
console.log(lnglat)
const geocoder = new Amap.Geocoder({
radius: 1000,
extensions: 'all',
})
geocoder.getAddress(lnglat, function (status: any, result: any) {
if (status === 'complete' && result.regeocode) {
const address = result.regeocode.addressComponent
console.log(address.province)
console.log(address.city)
setAddressContent({
province: address.province,
city: address.city,
lon: lnglat.lng,
lat: lnglat.lat,
})
setIsAddressMapShow(false)
// console.log(address.province + address.city + address.district) // 打印省市区信息
}
})
// MAP.off('click', mapGet); // 移除click事件
}
const addEntiy = (lon: any, lat: any, name: string) => {
if (!Amap) return
const icons = new Amap.Icon({
size: new Amap.Size(60, 60), // 图标尺寸
imageSize: new Amap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
})
const marker = new Amap.Marker({
position: new Amap.LngLat(lon, lat),
offset: new Amap.Pixel(-10, -10),
icon: icons, // 添加 Icon 实例
title: name,
zoom: 13,
})
return marker
}
useEffect(() => {
;(async () => {
await init()
})()
return MAP && MAP.destroy()
}, [])
return (
<Box className="right-box-item">
<div id="container" className="map"></div>
</Box>
)
}
pages/jobServices/detail/components/map/styled.tsx 0 → 100644
import styled from 'styled-components'
export default function Style() {
return <></>
}
export const Box = styled.div`
box-sizing: border-box;
width: 800px;
height: 800px;
#container {
position: relative;
padding: 0px;
margin: 0px;
width: 100%;
height: 800px;
}
.amap-logo {
//去除高德地图水印
display: none !important;
visibility: hidden !important;
}
.amap-copyright {
//去除高德地图水印
display: none !important;
visibility: hidden !important;
}
`
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论