|
|
|
|
@ -109,15 +109,22 @@
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :xl="10" :md="10" :sm="10">
|
|
|
|
|
<a-form-item
|
|
|
|
|
:rules="[{ required: true, message: '请输入小区名称', trigger: 'blur' }]"
|
|
|
|
|
:rules="[{ required: true, message: '请输入小区名称', trigger: 'change' }]"
|
|
|
|
|
name="detailAddress"
|
|
|
|
|
>
|
|
|
|
|
<a-input
|
|
|
|
|
id="tipinput"
|
|
|
|
|
v-model:value="formModel.detailAddress"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
placeholder="请输入小区名称"
|
|
|
|
|
:disabled="title === '编辑预约'"
|
|
|
|
|
:readonly="title === '详情' || title === '分发'"
|
|
|
|
|
:disabled="title === '编辑预约' || title === '编辑'"
|
|
|
|
|
class="custom-tooltip"
|
|
|
|
|
:title="formModel.address && formModel.address.length === 0 ? '请先选择省市区' : ''"
|
|
|
|
|
:readonly="
|
|
|
|
|
title === '详情' ||
|
|
|
|
|
title === '分发' ||
|
|
|
|
|
(formModel.address && formModel.address.length === 0)
|
|
|
|
|
"
|
|
|
|
|
/>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
@ -142,7 +149,7 @@
|
|
|
|
|
<a-button
|
|
|
|
|
v-if="title === '新建预约' || title === '编辑预约' || title === '编辑'"
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="match"
|
|
|
|
|
@click="match(formModel.detailAddress)"
|
|
|
|
|
>匹配</a-button
|
|
|
|
|
>
|
|
|
|
|
<a-button
|
|
|
|
|
@ -448,6 +455,12 @@ const addressChange = (value: any) => {
|
|
|
|
|
formModel.economize = value[0]
|
|
|
|
|
formModel.market = value[1]
|
|
|
|
|
formModel.distinguish = value[2]
|
|
|
|
|
city.value = value[1].slice(0, -1)
|
|
|
|
|
cityAnddistinguish.value = value[1] + value[2]
|
|
|
|
|
console.log(cityAnddistinguish.value, 'cityAnddistinguish.value')
|
|
|
|
|
auto()
|
|
|
|
|
// console.log(city.value, 'city.value')
|
|
|
|
|
// formModel.detailAddress = value.toString() + formModel.detailAddress
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -521,14 +534,14 @@ const infoWindows = ref<any>({})
|
|
|
|
|
//上一次点击的标记物id
|
|
|
|
|
let previousId: any = null
|
|
|
|
|
//匹配查询
|
|
|
|
|
const pagingQuery = () => {
|
|
|
|
|
const pagingQuery = (lng: number, lat: number) => {
|
|
|
|
|
if (circle.value) {
|
|
|
|
|
map.value.remove(circle.value)
|
|
|
|
|
}
|
|
|
|
|
const color = '#DFEBF3'
|
|
|
|
|
// 创建圆形覆盖物
|
|
|
|
|
circle.value = new AMap.Circle({
|
|
|
|
|
center: [lng.value, lat.value], // 圆心坐标
|
|
|
|
|
center: [lng, lat], // 圆心坐标
|
|
|
|
|
radius: formModel.radius, // 半径，单位为米
|
|
|
|
|
fillColor: color, // 填充颜色
|
|
|
|
|
strokeColor: '#a1ceeb', // 边框颜色
|
|
|
|
|
@ -537,92 +550,89 @@ const pagingQuery = () => {
|
|
|
|
|
// 将圆形覆盖物添加到地图
|
|
|
|
|
map.value.add(circle.value)
|
|
|
|
|
|
|
|
|
|
doRequest(
|
|
|
|
|
getStoreData({ longitude: lng.value, latitude: lat.value, distance: formModel.radius }),
|
|
|
|
|
{
|
|
|
|
|
onSuccess: (result: any) => {
|
|
|
|
|
if (result.code === 200) {
|
|
|
|
|
if (result.data.length === 0) {
|
|
|
|
|
message.info('当前位置附近暂无相关门店')
|
|
|
|
|
} else {
|
|
|
|
|
const ids = formModel.customStoreEntities.map(item => item.storeId)
|
|
|
|
|
listData.value.length = 0
|
|
|
|
|
result.data &&
|
|
|
|
|
result.data.forEach((item: any) => {
|
|
|
|
|
const disabled = ids.includes(Number(item.id))
|
|
|
|
|
listData.value.push({
|
|
|
|
|
title: item.storeName,
|
|
|
|
|
description: item.address,
|
|
|
|
|
content: item.nid ? item.nid : '',
|
|
|
|
|
disabled: disabled,
|
|
|
|
|
lat: item.latitude,
|
|
|
|
|
lng: item.longitude,
|
|
|
|
|
id: item.id,
|
|
|
|
|
index: item.index,
|
|
|
|
|
tel: item.nid ? item.nid : '',
|
|
|
|
|
reservationDate: item.reservationDate,
|
|
|
|
|
option: generateTimeSlots(item.tradeStartTime, item.tradeEndTime)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
pois.push(...listData.value)
|
|
|
|
|
// 设置缩放级别,设置地图视图级别为
|
|
|
|
|
const targetZoom = 12
|
|
|
|
|
|
|
|
|
|
//回调函数
|
|
|
|
|
const placeSearch_CallBack = (data: any) => {
|
|
|
|
|
const poiArr = data
|
|
|
|
|
infoWindows.value = new AMap.InfoWindow({
|
|
|
|
|
autoMove: true,
|
|
|
|
|
isCustom: true,
|
|
|
|
|
offset: { x: 0, y: -30 } // 信息窗体的偏移量
|
|
|
|
|
doRequest(getStoreData({ longitude: lng, latitude: lat, distance: formModel.radius }), {
|
|
|
|
|
onSuccess: (result: any) => {
|
|
|
|
|
if (result.code === 200) {
|
|
|
|
|
if (result.data.length === 0) {
|
|
|
|
|
message.info('当前位置附近暂无相关门店')
|
|
|
|
|
} else {
|
|
|
|
|
const ids = formModel.customStoreEntities.map(item => item.storeId)
|
|
|
|
|
listData.value.length = 0
|
|
|
|
|
result.data &&
|
|
|
|
|
result.data.forEach((item: any) => {
|
|
|
|
|
const disabled = ids.includes(Number(item.id))
|
|
|
|
|
listData.value.push({
|
|
|
|
|
title: item.storeName,
|
|
|
|
|
description: item.address,
|
|
|
|
|
content: item.nid ? item.nid : '',
|
|
|
|
|
disabled: disabled,
|
|
|
|
|
lat: item.latitude,
|
|
|
|
|
lng: item.longitude,
|
|
|
|
|
id: item.id,
|
|
|
|
|
index: item.index,
|
|
|
|
|
tel: item.nid ? item.nid : '',
|
|
|
|
|
reservationDate: item.reservationDate,
|
|
|
|
|
option: generateTimeSlots(item.tradeStartTime, item.tradeEndTime)
|
|
|
|
|
})
|
|
|
|
|
//添加marker
|
|
|
|
|
const markers = new AMap.Marker({
|
|
|
|
|
map: map.value,
|
|
|
|
|
position: [poiArr.lng, poiArr.lat],
|
|
|
|
|
// clickable: true,//表示某个元素可以接收用户点击事件,默认值为true
|
|
|
|
|
// offset: new AMap.Pixel(-90, -70), // 设置偏移量以调整卡片位置
|
|
|
|
|
zIndex: 0, // 设置标记点的层级为 1000
|
|
|
|
|
extData: {
|
|
|
|
|
id: `${poiArr.id}`
|
|
|
|
|
// 其他属性...
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
markers.on('click', function (data: any) {
|
|
|
|
|
const currentId = data.target.getExtData().id
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
infoWindows.value.getIsOpen() &&
|
|
|
|
|
(currentId === previousId || currentId === currentStoreId.value)
|
|
|
|
|
) {
|
|
|
|
|
// 信息窗体已打开,并且当前点击的标记物与上一次点击的标记物相同，或者与当前存储的门店标记物相同
|
|
|
|
|
currentStoreId.value = currentId
|
|
|
|
|
previousId = currentId
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
infoWindows.value.open(map.value, markers.getPosition()) // 在地图上打开信息弹窗，并将信息弹窗显示在标记点的位置
|
|
|
|
|
map.value.setZoomAndCenter(targetZoom, [data.lnglat.lng, data.lnglat.lat]) // 设置地图的缩放级别和中心点，使地图以指定的缩放级别和中心点进行显示
|
|
|
|
|
map.value.setCenter(markers.getPosition()) // 将地图的中心点设置为标记点的位置
|
|
|
|
|
infoWindows.value.setContent(createContent(poiArr)) // 将生成的内容设置到信息弹窗中
|
|
|
|
|
|
|
|
|
|
// 更新上一次点击的标记物ID
|
|
|
|
|
})
|
|
|
|
|
pois.push(...listData.value)
|
|
|
|
|
// 设置缩放级别,设置地图视图级别为
|
|
|
|
|
const targetZoom = 12
|
|
|
|
|
|
|
|
|
|
//回调函数
|
|
|
|
|
const placeSearch_CallBack = (data: any) => {
|
|
|
|
|
const poiArr = data
|
|
|
|
|
infoWindows.value = new AMap.InfoWindow({
|
|
|
|
|
autoMove: true,
|
|
|
|
|
isCustom: true,
|
|
|
|
|
offset: { x: 0, y: -30 } // 信息窗体的偏移量
|
|
|
|
|
})
|
|
|
|
|
//添加marker
|
|
|
|
|
const markers = new AMap.Marker({
|
|
|
|
|
map: map.value,
|
|
|
|
|
position: [poiArr.lng, poiArr.lat],
|
|
|
|
|
// clickable: true,//表示某个元素可以接收用户点击事件,默认值为true
|
|
|
|
|
// offset: new AMap.Pixel(-90, -70), // 设置偏移量以调整卡片位置
|
|
|
|
|
zIndex: 0, // 设置标记点的层级为 1000
|
|
|
|
|
extData: {
|
|
|
|
|
id: `${poiArr.id}`
|
|
|
|
|
// 其他属性...
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
markers.on('click', function (data: any) {
|
|
|
|
|
const currentId = data.target.getExtData().id
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
infoWindows.value.getIsOpen() &&
|
|
|
|
|
(currentId === previousId || currentId === currentStoreId.value)
|
|
|
|
|
) {
|
|
|
|
|
// 信息窗体已打开,并且当前点击的标记物与上一次点击的标记物相同，或者与当前存储的门店标记物相同
|
|
|
|
|
currentStoreId.value = currentId
|
|
|
|
|
previousId = currentId
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
for (let i = 0; i < pois.length; i++) {
|
|
|
|
|
placeSearch_CallBack(pois[i])
|
|
|
|
|
}
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
infoWindows.value.open(map.value, markers.getPosition()) // 在地图上打开信息弹窗，并将信息弹窗显示在标记点的位置
|
|
|
|
|
map.value.setZoomAndCenter(targetZoom, [data.lnglat.lng, data.lnglat.lat]) // 设置地图的缩放级别和中心点，使地图以指定的缩放级别和中心点进行显示
|
|
|
|
|
map.value.setCenter(markers.getPosition()) // 将地图的中心点设置为标记点的位置
|
|
|
|
|
infoWindows.value.setContent(createContent(poiArr)) // 将生成的内容设置到信息弹窗中
|
|
|
|
|
|
|
|
|
|
// 更新上一次点击的标记物ID
|
|
|
|
|
currentStoreId.value = currentId
|
|
|
|
|
previousId = currentId
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
for (let i = 0; i < pois.length; i++) {
|
|
|
|
|
placeSearch_CallBack(pois[i])
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//匹配
|
|
|
|
|
const match = () => {
|
|
|
|
|
const match = async (detailAddress: string) => {
|
|
|
|
|
const fields = ['address', 'detailAddress', 'radius'] // 指定要校验的字段名
|
|
|
|
|
formRef.value
|
|
|
|
|
?.validateFields(fields)
|
|
|
|
|
@ -632,13 +642,48 @@ const match = () => {
|
|
|
|
|
lng.value = undefined
|
|
|
|
|
lat.value = undefined
|
|
|
|
|
map.value.clearMap()
|
|
|
|
|
city.value = formModel.market?.slice(0, -1)
|
|
|
|
|
AMap.plugin('AMap.Geocoder', function () {
|
|
|
|
|
geocoder.value = new AMap.Geocoder({
|
|
|
|
|
city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
|
|
|
|
city: city.value // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
//标记中心点
|
|
|
|
|
getCenterMarker('match')
|
|
|
|
|
// 浙江省杭州市上城区九和路与杭海路交叉口西北约180米
|
|
|
|
|
// 创建地点搜索服务实例
|
|
|
|
|
const searchService = new AMap.PlaceSearch({
|
|
|
|
|
// 在这里填写您的高德地图 API Key
|
|
|
|
|
key: '1d3839a0fe4ad113f7d88ec3775107b7',
|
|
|
|
|
// 指定地点搜索服务的版本号
|
|
|
|
|
version: '2.0'
|
|
|
|
|
})
|
|
|
|
|
const addressValue = formModel.address?.toString().split(',').join('') + detailAddress
|
|
|
|
|
//标记中心点
|
|
|
|
|
// formModel.address?.toString().split(',').join('') + formModel.detailAddress
|
|
|
|
|
|
|
|
|
|
// 执行地点搜索
|
|
|
|
|
searchService.search(addressValue, (status: any, result: any) => {
|
|
|
|
|
if (status === 'complete' && result.info === 'OK') {
|
|
|
|
|
// 处理搜索结果
|
|
|
|
|
const pois = result.poiList.pois
|
|
|
|
|
// 对获取到的兴趣点列表进行处理
|
|
|
|
|
console.log(pois, 'pois')
|
|
|
|
|
console.log(pois[0].location.lng, pois[0].location.lat, 'pois经纬度')
|
|
|
|
|
getCenterMarker('match', pois[0].location.lng, pois[0].location.lat)
|
|
|
|
|
// await getCenterMarker('match', formModel.otherAddressesInfo)
|
|
|
|
|
// if (type === 'match') {
|
|
|
|
|
|
|
|
|
|
// formModel.otherAddressesInfo = detailAddress
|
|
|
|
|
} else {
|
|
|
|
|
// 地点搜索失败的处理逻辑
|
|
|
|
|
console.log('地点搜索失败')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// await getCenterMarker('match', formModel.otherAddressesInfo)
|
|
|
|
|
// // if (type === 'match') {
|
|
|
|
|
// pagingQuery()
|
|
|
|
|
// }
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
// 校验失败
|
|
|
|
|
@ -824,6 +869,7 @@ const formModel = reactive<CustomerDTO>({
|
|
|
|
|
market: '',
|
|
|
|
|
distinguish: '',
|
|
|
|
|
detailAddress: '',
|
|
|
|
|
otherAddressesInfo: '',
|
|
|
|
|
radius: '5000',
|
|
|
|
|
enrollStatus: 1,
|
|
|
|
|
customStoreEntities: []
|
|
|
|
|
@ -905,6 +951,7 @@ defineExpose({
|
|
|
|
|
market,
|
|
|
|
|
distinguish,
|
|
|
|
|
detailAddress,
|
|
|
|
|
otherAddressesInfo,
|
|
|
|
|
radius,
|
|
|
|
|
customStoreVOList
|
|
|
|
|
} = data
|
|
|
|
|
@ -918,6 +965,7 @@ defineExpose({
|
|
|
|
|
formModel.market = market
|
|
|
|
|
formModel.distinguish = distinguish
|
|
|
|
|
formModel.detailAddress = detailAddress
|
|
|
|
|
formModel.otherAddressesInfo = otherAddressesInfo
|
|
|
|
|
formModel.radius = radius
|
|
|
|
|
formModel.customStoreEntities.push(...customStoreVOList)
|
|
|
|
|
//获取预约时间段下拉框回显数据
|
|
|
|
|
@ -927,13 +975,17 @@ defineExpose({
|
|
|
|
|
if (opendata.type === 'audit') {
|
|
|
|
|
// isReadOnly.value = true
|
|
|
|
|
// reservationTimeisReadOnly.value = true
|
|
|
|
|
// city.value = formModel.market?.slice(0, -1)
|
|
|
|
|
isDisabled.value = true
|
|
|
|
|
handleMapInit()
|
|
|
|
|
title.value = '编辑'
|
|
|
|
|
// formModel.description = 1
|
|
|
|
|
} else if (opendata.type === 'edit') {
|
|
|
|
|
isDisabled.value = true
|
|
|
|
|
handleMapInit()
|
|
|
|
|
|
|
|
|
|
match(formModel.detailAddress)
|
|
|
|
|
//标记中心点
|
|
|
|
|
// getCenterMarker('init')
|
|
|
|
|
title.value = '编辑预约'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -966,7 +1018,7 @@ defineExpose({
|
|
|
|
|
else if (opendata.type === 'distribute') {
|
|
|
|
|
isReadOnly.value = true
|
|
|
|
|
reservationTimeisReadOnly.value = true
|
|
|
|
|
handleMapInit()
|
|
|
|
|
// handleMapInit()
|
|
|
|
|
title.value = '分发'
|
|
|
|
|
formModel.description = 1
|
|
|
|
|
}
|
|
|
|
|
@ -984,6 +1036,7 @@ defineExpose({
|
|
|
|
|
//地图
|
|
|
|
|
// import { provincesAndCitiesAndAutonomousRegions } from '@/utils/geopolitical-customers'
|
|
|
|
|
import type { ShowSearchType } from 'ant-design-vue/es/cascader'
|
|
|
|
|
import { compileStyle } from 'vue/compiler-sfc'
|
|
|
|
|
|
|
|
|
|
declare const AMap: any
|
|
|
|
|
|
|
|
|
|
@ -998,68 +1051,200 @@ const autoComplete = ref()
|
|
|
|
|
//点标记AMap.Marker
|
|
|
|
|
//创建的一个 Marker 实例
|
|
|
|
|
const marker = ref<any>({})
|
|
|
|
|
//创建的一个 中心点Marker 实例
|
|
|
|
|
const markerCenter = ref<any>({})
|
|
|
|
|
const previousMarker = ref<any>({})
|
|
|
|
|
//创建地图AMap.Map
|
|
|
|
|
const map = ref<any>({})
|
|
|
|
|
|
|
|
|
|
//使用geocoder做地理/逆地理编码
|
|
|
|
|
//正向地理编码： 将地址 描述信息 转换成 地理坐标（经纬度），对应为AMap.Geocoder的getLocation方法
|
|
|
|
|
//逆向地理编码：将 地理坐标（经纬度） 转换成 地址描述信息，对应为AMap.Geocoder的getAddress方法
|
|
|
|
|
const geocoder = ref<any>({})
|
|
|
|
|
|
|
|
|
|
//标记中心点封装的方法
|
|
|
|
|
const getCenterMarker = (type: string) => {
|
|
|
|
|
const addressValue =
|
|
|
|
|
//标记中心点
|
|
|
|
|
formModel.address?.toString().split(',').join('') + formModel.detailAddress
|
|
|
|
|
geocoder.value.getLocation(addressValue, function (status: any, result: any) {
|
|
|
|
|
if (status === 'complete' && result.info === 'OK') {
|
|
|
|
|
// result中对应详细地理坐标信息
|
|
|
|
|
lng.value = result.geocodes[0].location.lng
|
|
|
|
|
lat.value = result.geocodes[0].location.lat
|
|
|
|
|
// 设置地图中心点
|
|
|
|
|
map.value.setCenter([lng.value, lat.value]) // 将经度和纬度作为参数传入
|
|
|
|
|
if (type === 'match') {
|
|
|
|
|
//修改地图的缩放级别
|
|
|
|
|
map.value.setZoom(12) // 设置新的缩放级别，例如12
|
|
|
|
|
}
|
|
|
|
|
// 创建标记并添加到地图上
|
|
|
|
|
const marker = new AMap.Marker({
|
|
|
|
|
position: [lng.value, lat.value], // 设定标记的位置为地图中心点
|
|
|
|
|
zIndex: 100 // 设置标记点的 z-index 值为 100
|
|
|
|
|
})
|
|
|
|
|
const getCenterMarker = (type: string, lng: number, lat: number) => {
|
|
|
|
|
// const addressValue = ref<string>('')
|
|
|
|
|
// if (address) {
|
|
|
|
|
// addressValue.value = address
|
|
|
|
|
// } else {
|
|
|
|
|
// addressValue.value =
|
|
|
|
|
// //标记中心点
|
|
|
|
|
// formModel.address?.toString().split(',').join('') + formModel.detailAddress
|
|
|
|
|
// // console.log(addressValue, 'addressValue')
|
|
|
|
|
// }
|
|
|
|
|
// console.log(addressValue.value, 'addressValue.value')
|
|
|
|
|
|
|
|
|
|
// 浙江省杭州市上城区九和路与杭海路交叉口西北约180米
|
|
|
|
|
// geocoder.value.getLocation(addressValue.value, function (status: any, result: any) {
|
|
|
|
|
// if (status === 'complete' && result.info === 'OK') {
|
|
|
|
|
// result中对应详细地理坐标信息
|
|
|
|
|
// lng.value = result.geocodes[0].location.lng
|
|
|
|
|
// lat.value = result.geocodes[0].location.lat
|
|
|
|
|
|
|
|
|
|
// lng.value = lng
|
|
|
|
|
// lat.value = lat
|
|
|
|
|
|
|
|
|
|
// 设置地图中心点
|
|
|
|
|
map.value.setCenter([lng, lat]) // 将经度和纬度作为参数传入
|
|
|
|
|
if (type === 'match' || type === 'select') {
|
|
|
|
|
//修改地图的缩放级别
|
|
|
|
|
map.value.setZoom(12) // 设置新的缩放级别，例如12
|
|
|
|
|
}
|
|
|
|
|
// console.log(lng.value, lat.value, 'lng.value, lat.value')
|
|
|
|
|
|
|
|
|
|
// 设置标记点的样式
|
|
|
|
|
marker.setIcon(
|
|
|
|
|
new AMap.Icon({
|
|
|
|
|
image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png', // 使用红色标记点的图标 URL
|
|
|
|
|
size: new AMap.Size(18, 30), // 图标尺寸
|
|
|
|
|
imageSize: new AMap.Size(18, 30) // 图片尺寸
|
|
|
|
|
})
|
|
|
|
|
)
|
|
|
|
|
marker.setMap(map.value) // 将标记添加到地图上
|
|
|
|
|
}
|
|
|
|
|
if (type === 'match') {
|
|
|
|
|
pagingQuery()
|
|
|
|
|
}
|
|
|
|
|
if (previousMarker.value && type === 'select') {
|
|
|
|
|
map.value.remove(markerCenter.value) // 从地图上移除之前的中心点标记物
|
|
|
|
|
}
|
|
|
|
|
// 创建标记并添加到地图上
|
|
|
|
|
markerCenter.value = new AMap.Marker({
|
|
|
|
|
position: [lng, lat], // 设定标记的位置为地图中心点
|
|
|
|
|
zIndex: 100 // 设置标记点的 z-index 值为 100
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 设置标记点的样式
|
|
|
|
|
markerCenter.value.setIcon(
|
|
|
|
|
new AMap.Icon({
|
|
|
|
|
image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png', // 使用红色标记点的图标 URL
|
|
|
|
|
size: new AMap.Size(18, 30), // 图标尺寸
|
|
|
|
|
imageSize: new AMap.Size(18, 30) // 图片尺寸
|
|
|
|
|
})
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
markerCenter.value.setMap(map.value) // 将标记添加到地图上
|
|
|
|
|
previousMarker.value = marker // 将新的中心点标记物赋值给 previousMarker
|
|
|
|
|
|
|
|
|
|
if (type === 'match') {
|
|
|
|
|
console.log(type, 'type')
|
|
|
|
|
pagingQuery(lng, lat)
|
|
|
|
|
}
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
}
|
|
|
|
|
// 当用户选择输入提示结果后进行查询操作
|
|
|
|
|
const performQuery = (selectedTip: any) => {
|
|
|
|
|
const geocoder = new AMap.Geocoder()
|
|
|
|
|
const location = selectedTip.location
|
|
|
|
|
const performQuery = (selectedTip: any, detailAddress: string) => {
|
|
|
|
|
// 创建地点搜索服务实例
|
|
|
|
|
const searchService = new AMap.PlaceSearch({
|
|
|
|
|
// 在这里填写您的高德地图 API Key
|
|
|
|
|
key: '1d3839a0fe4ad113f7d88ec3775107b7',
|
|
|
|
|
// 指定地点搜索服务的版本号
|
|
|
|
|
version: '2.0'
|
|
|
|
|
})
|
|
|
|
|
const addressValue = formModel.address?.toString().split(',').join('') + selectedTip.name
|
|
|
|
|
//标记中心点
|
|
|
|
|
// formModel.address?.toString().split(',').join('') + formModel.detailAddress
|
|
|
|
|
|
|
|
|
|
// 使用地理编码查询
|
|
|
|
|
geocoder.getAddress(location, function (status: any, result: any) {
|
|
|
|
|
// 执行地点搜索
|
|
|
|
|
searchService.search(addressValue, (status: any, result: any) => {
|
|
|
|
|
if (status === 'complete' && result.info === 'OK') {
|
|
|
|
|
// 处理查询结果
|
|
|
|
|
const address = result.regeocode.formattedAddress
|
|
|
|
|
console.log('查询结果：', address)
|
|
|
|
|
// 进行其他操作...
|
|
|
|
|
// 处理搜索结果
|
|
|
|
|
const pois = result.poiList.pois
|
|
|
|
|
// 对获取到的兴趣点列表进行处理
|
|
|
|
|
console.log(pois, 'pois')
|
|
|
|
|
console.log(pois[0].location.lng, pois[0].location.lat, 'pois经纬度')
|
|
|
|
|
getCenterMarker('select', pois[0].location.lng, pois[0].location.lat)
|
|
|
|
|
formModel.otherAddressesInfo = `${pois[0].location.lng},${pois[0].location.lat}`
|
|
|
|
|
} else {
|
|
|
|
|
// 地点搜索失败的处理逻辑
|
|
|
|
|
console.log('地点搜索失败')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// const geocoder = new AMap.Geocoder()
|
|
|
|
|
// const location = selectedTip.location
|
|
|
|
|
// if (location) {
|
|
|
|
|
// // 使用地理编码查询
|
|
|
|
|
// geocoder.getAddress(location, function (status: any, result: any) {
|
|
|
|
|
// if (status === 'complete' && result.info === 'OK') {
|
|
|
|
|
// // 处理查询结果
|
|
|
|
|
// const address = result.regeocode.formattedAddress
|
|
|
|
|
// console.log('查询结果：', address)
|
|
|
|
|
// console.log(detailAddress, 'detailAddress')
|
|
|
|
|
|
|
|
|
|
// // 进行其他操作...
|
|
|
|
|
// match()
|
|
|
|
|
|
|
|
|
|
// // detailAddress = detailAddress.substring(0, 14)
|
|
|
|
|
// // if (detailAddress === '浙江省杭州市上城区九和路8号华侨国际·新侨创智中心') {
|
|
|
|
|
// // detailAddress = detailAddress.substring(0, detailAddress.indexOf('号') + 1)
|
|
|
|
|
// // console.log(detailAddress, 'detailAddress1111')
|
|
|
|
|
// // //标记中心点
|
|
|
|
|
// // getCenterMarker('select', detailAddress)
|
|
|
|
|
// // formModel.otherAddressesInfo = detailAddress
|
|
|
|
|
// // } else {
|
|
|
|
|
// // //标记中心点
|
|
|
|
|
// // getCenterMarker('select', detailAddress)
|
|
|
|
|
// // formModel.otherAddressesInfo = detailAddress
|
|
|
|
|
// // }
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// } else {
|
|
|
|
|
// message.info('地址错误,请重新进行选择')
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
const city = ref<string | undefined>('')
|
|
|
|
|
const cityAnddistinguish = ref<string | undefined>('')
|
|
|
|
|
|
|
|
|
|
const detailAddress = ref<string>('')
|
|
|
|
|
const auto = async () => {
|
|
|
|
|
await AMap.plugin('AMap.AutoComplete', function () {
|
|
|
|
|
// 实例化Autocomplete
|
|
|
|
|
// cityAnddistinguish.value
|
|
|
|
|
const autoOptions = {
|
|
|
|
|
city: '浙江省杭州市西湖区', // 限定城市，默认全国
|
|
|
|
|
input: 'tipinput',
|
|
|
|
|
citylimit: true,
|
|
|
|
|
noLocation: true // 禁用定位功能
|
|
|
|
|
}
|
|
|
|
|
console.log(cityAnddistinguish.value, 'cityAnddistinguish.value')
|
|
|
|
|
autoComplete.value = new AMap.AutoComplete(autoOptions)
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
// autoComplete.value?.on('beforeSearch', (e: any) => {
|
|
|
|
|
// const keywords = e.keywords // 获取用户输入的关键字
|
|
|
|
|
// console.log(keywords, 'keywords')
|
|
|
|
|
// e.keywords = `${formModel.market} ${keywords}` // 在关键字前加上用户选择的区域信息
|
|
|
|
|
// // const selectedDistrict = formModel.market // 获取用户选择的区域信息
|
|
|
|
|
|
|
|
|
|
// // 设置搜索关键字的限制条件
|
|
|
|
|
// // if (selectedDistrict && selectedDistrict !== '西湖区') {
|
|
|
|
|
// // e.keywords = `${selectedDistrict} ${keywords}` // 在关键字前加上用户选择的区域信息
|
|
|
|
|
// // }
|
|
|
|
|
// })
|
|
|
|
|
autoComplete.value?.on('select', (e: any) => {
|
|
|
|
|
// console.log(e.poi, 'e.poi')
|
|
|
|
|
// const selectedTip = e.poi // 获取用户选择的提示结果对象
|
|
|
|
|
// formModel.detailAddress = selectedTip.name // 将选中的提示项名称赋值给输入框的值（使用 v-model 来绑定）
|
|
|
|
|
// detailAddress.value = selectedTip.district + selectedTip.address
|
|
|
|
|
// // console.log(formModel.detailAddress, 'formModel.detailAddress')
|
|
|
|
|
// performQuery(selectedTip, detailAddress.value) // 执行查询操作
|
|
|
|
|
const selectedTip = e.poi
|
|
|
|
|
if (selectedTip.district === formModel.market) {
|
|
|
|
|
// 处理选择的提示结果
|
|
|
|
|
formModel.detailAddress = selectedTip.name
|
|
|
|
|
detailAddress.value = selectedTip.district + selectedTip.address
|
|
|
|
|
performQuery(selectedTip, detailAddress.value)
|
|
|
|
|
} else {
|
|
|
|
|
// 忽略其他区域的提示结果
|
|
|
|
|
message.info(`只能选择${formModel.distinguish}内的地址`)
|
|
|
|
|
// console.log('只能选择西湖区内的地址')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}, 300)
|
|
|
|
|
|
|
|
|
|
AMap.plugin('AMap.Geocoder', function () {
|
|
|
|
|
geocoder.value = new AMap.Geocoder({
|
|
|
|
|
// city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
|
|
|
|
city: city.value
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// geocoder.value = new AMap.Geocoder({
|
|
|
|
|
// city: '010' //城市设为北京，默认：“全国”
|
|
|
|
|
// })
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//创建地图
|
|
|
|
|
const initMap = () => {
|
|
|
|
|
const initMap = async () => {
|
|
|
|
|
map.value = new AMap.Map('draw-station-container', {
|
|
|
|
|
// center: [120.1551, 30.2741], // 地图中心点经纬度
|
|
|
|
|
zoom: 18 // 缩放级别
|
|
|
|
|
@ -1084,32 +1269,28 @@ const initMap = () => {
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
AMap.plugin('AMap.AutoComplete', function () {
|
|
|
|
|
// 实例化Autocomplete
|
|
|
|
|
const autoOptions = {
|
|
|
|
|
//city 限定城市，默认全国
|
|
|
|
|
input: 'tipinput'
|
|
|
|
|
}
|
|
|
|
|
// AMap.plugin('AMap.AutoComplete', function () {
|
|
|
|
|
// // 实例化Autocomplete
|
|
|
|
|
// const autoOptions = {
|
|
|
|
|
// city: city.value, // 限定城市，默认全国
|
|
|
|
|
// input: 'tipinput'
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
autoComplete.value = new AMap.AutoComplete(autoOptions)
|
|
|
|
|
// geocoder.value = new AMap.Geocoder({
|
|
|
|
|
// city: '010' //城市设为北京，默认：“全国”
|
|
|
|
|
// })
|
|
|
|
|
})
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
autoComplete.value?.on('select', (e: any) => {
|
|
|
|
|
const selectedTip = e.poi // 获取用户选择的提示结果对象
|
|
|
|
|
formModel.detailAddress = selectedTip.name // 将选中的提示项名称赋值给输入框的值（使用 v-model 来绑定）
|
|
|
|
|
performQuery(selectedTip) // 执行查询操作
|
|
|
|
|
})
|
|
|
|
|
}, 300)
|
|
|
|
|
AMap.plugin('AMap.Geocoder', function () {
|
|
|
|
|
geocoder.value = new AMap.Geocoder({
|
|
|
|
|
city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
//标记中心点
|
|
|
|
|
getCenterMarker('init')
|
|
|
|
|
// autoComplete.value = new AMap.AutoComplete(autoOptions)
|
|
|
|
|
// // geocoder.value = new AMap.Geocoder({
|
|
|
|
|
// // city: '010' //城市设为北京，默认：“全国”
|
|
|
|
|
// // })
|
|
|
|
|
// })
|
|
|
|
|
await auto()
|
|
|
|
|
if (title.value === '编辑预约' || title.value === '编辑') {
|
|
|
|
|
// city.value = formModel.market?.slice(0, -1)
|
|
|
|
|
//标记中心点
|
|
|
|
|
getCenterMarker(
|
|
|
|
|
'init',
|
|
|
|
|
Number(formModel.otherAddressesInfo?.split(',')[0]),
|
|
|
|
|
Number(formModel.otherAddressesInfo?.split(',')[1])
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// map.value.add(marker.value)
|
|
|
|
|
}
|
|
|
|
|
@ -1359,4 +1540,27 @@ const storeItemClick = (item: any, index: number) => {
|
|
|
|
|
::v-deep .ant-space-item {
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
}
|
|
|
|
|
//a-input鼠标移入提示请先选择省市区
|
|
|
|
|
.custom-tooltip {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.custom-tooltip::before {
|
|
|
|
|
content: attr(title);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
background-color: #f8f8f8;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
border-top: none;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #333;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transition: opacity 0.2s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
.custom-tooltip:hover::before {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
