| | |
| | | } |
| | | const startMarking = (index) => { |
| | | markingIndex.value = index |
| | | ElMessage.info('请在下方地图点击需要标注的位置') |
| | | ElMessage.info('可搜索地点,或直接点击地图设置汇合点') |
| | | } |
| | | const markPoint = ({ index, longitude, latitude, address }) => { |
| | | if (markingIndex.value !== index || !form.meetingPoints[index]) return |
| | |
| | | } |
| | | } |
| | | const placeMeetingPoint = (index, { longitude, latitude, address }) => { |
| | | markingIndex.value = index |
| | | markPoint({ index, longitude, latitude, address }) |
| | | } |
| | | const syncMeetingPointAddress = (index, { address }) => { |
| | |
| | | 标注汇合点 |
| | | </el-button> |
| | | </div> |
| | | <div class="meeting-address-row"> |
| | | <span class="meeting-label">定位地址</span> |
| | | <el-input :model-value="point.address" disabled placeholder="标注后自动获取地图具体地址" /> |
| | | </div> |
| | | <div class="meeting-map-row"> |
| | | <AmapMeetingPointMap |
| | | class="meeting-map" |
| | | :points="[point]" |
| | | :active-index="markingIndex === index ? 0 : null" |
| | | :city-name="selectedCityName" |
| | | :show-search="false" |
| | | search-label="定位地址" |
| | | :address="point.address" |
| | | show-search |
| | | direct-placement |
| | | compact |
| | | @place="placeMeetingPoint(index, $event)" |
| | | @address-resolved="syncMeetingPointAddress(index, $event)" |
| | |
| | | .meeting-label { color: #475467; font-size: 14px; font-weight: 500; } |
| | | .meeting-toolbar :deep(.el-input__wrapper) { background: #f5f7fa; box-shadow: none; } |
| | | .meeting-toolbar :deep(.el-button) { width: 120px; margin: 0; } |
| | | .meeting-address-row { display: grid; grid-template-columns: 92px minmax(0, 397px); align-items: center; gap: 14px; margin-top: 14px; } |
| | | .meeting-address-row :deep(.el-input__wrapper) { background: #eef1f5; box-shadow: none; } |
| | | .meeting-map-row { display: grid; grid-template-columns: minmax(0, 504px) 88px; align-items: end; gap: 18px; margin-top: 24px; } |
| | | .meeting-map { min-width: 0; } |
| | | .meeting-delete-button { width: 88px; margin: 0; } |
| | |
| | | @media (max-width: 760px) { |
| | | .meeting-toolbar { grid-template-columns: 82px minmax(0, 1fr); } |
| | | .meeting-toolbar :deep(.el-button) { grid-column: 2; } |
| | | .meeting-address-row { grid-template-columns: 82px minmax(0, 1fr); } |
| | | .meeting-map-row { grid-template-columns: minmax(0, 1fr) 88px; } |
| | | } |
| | | </style> |