BizCoordinateInput 经纬度输入

无地图依赖的坐标键入组件：经度 / 纬度双输入（十进制度编辑口径），范围校验（±180 / ±90）与 precision 小数位截断，失焦下方报错；DMS 度分秒只读换算（116°23′50.7″E 式展示切换）；坐标系标注（WGS-84 / GCJ-02 / BD-09 提示性标签，不做偏移换算）；完整坐标一键复制 lng,lat，粘贴坐标文本自动分发两框。适用于门店 / 物流网点坐标录入、设备点位、巡检点位、外勤签到中心点、地理围栏顶点——地图拾取之外「手工键入 / 粘贴补录」的动线。

与相关组件的边界：BizMapPicker 面向地图点选拾取（输出 lng/lat，需地图 key）；BizCoordinateInput 面向键入 + 换算 + 校验（零依赖），二者常联动（选点回填、手工微调）。

基础录入

经度

纬度

两项同时有值时 v-model 落 { lng, lat } 对象（东经 / 北纬为正）； 当前值：116.397428, 39.90923

经纬双输入，两项同时有值时 v-model 落 { lng, lat } 对象（东经 / 北纬为正）。

<script setup lang="ts">
/** 场景：基础录入——经纬双输入，v-model 为 { lng, lat } 对象 */
import { ref } from 'vue'
import { BizCoordinateInput } from 'vue3-ep-biz-lib'
import type { BizCoordinateValue } from 'vue3-ep-biz-lib'

const coord = ref<BizCoordinateValue | undefined>({ lng: 116.397428, lat: 39.90923 })
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 560px">
    <BizCoordinateInput v-model="coord" />
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      两项同时有值时 v-model 落 <code>{ lng, lat }</code> 对象（东经 / 北纬为正）；
      当前值：<code>{{ coord === undefined ? '（空）' : `${coord.lng}, ${coord.lat}` }}</code>
    </p>
  </el-space>
</template>

显示代码

DMS 度分秒互转

经度

纬度

（悉尼坐标，南纬 S）

「度分秒」按钮切换 116°23′50.7″E 式只读展示（悬浮可见十进制原值）；编辑口径始终为十进制。

「度分秒」按钮切换只读换算展示（悬浮可见十进制原值）；getDms() 编程取值。

<script setup lang="ts">
/** 场景：DMS 度分秒互转——十进制编辑、度分秒只读换算展示切换 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizCoordinateInput } from 'vue3-ep-biz-lib'
import type { BizCoordinateInputInstance } from 'vue3-ep-biz-lib'

const coord = ref({ lng: 121.473701, lat: -33.865143 })
const inputRef = ref<BizCoordinateInputInstance>()

const showDms = (): void => {
  const dms = inputRef.value?.getDms()
  if (dms !== undefined) ElMessage.info(`${dms.lng} / ${dms.lat}`)
}
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 560px">
    <BizCoordinateInput ref="inputRef" v-model="coord" />
    <el-space>
      <el-button size="small" @click="showDms">getDms()</el-button>
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">（悉尼坐标，南纬 S）</span>
    </el-space>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      「度分秒」按钮切换 <code>116°23′50.7″E</code> 式只读展示（悬浮可见十进制原值）；编辑口径始终为十进制。
    </p>
  </el-space>
</template>

显示代码

校验

越界 / 缺项（试试经度填 200，或只填一边）

经度

纬度

精度限制（precision=4，粘贴 116.397428 自动截断）

经度

纬度

经度 ±180、纬度 ±90；两项需同时填写（单边缺填即报错）；blur 事件同步外抛 valid 供表单联动。

越界（经度 > 180）、单边缺填、精度超限失焦即报错；precision 自动截断输入小数位。

<script setup lang="ts">
/** 场景：校验——越界 / 单边缺填 / 精度超限，失焦下方报错 */
import { ref } from 'vue'
import { BizCoordinateInput } from 'vue3-ep-biz-lib'

const coord = ref()
const precisionCoord = ref()
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 560px">
    <el-card shadow="never">
      <template #header>越界 / 缺项（试试经度填 200，或只填一边）</template>
      <BizCoordinateInput v-model="coord" />
    </el-card>
    <el-card shadow="never">
      <template #header>精度限制（precision=4，粘贴 116.397428 自动截断）</template>
      <BizCoordinateInput v-model="precisionCoord" :precision="4" />
    </el-card>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      经度 ±180、纬度 ±90；两项需同时填写（单边缺填即报错）；blur 事件同步外抛 valid 供表单联动。
    </p>
  </el-space>
</template>

显示代码

受控回显与清空

经度

纬度

change 事件：（尚未变更）；完整坐标出现「复制 / 清空」操作，清空落 undefined。

外部异步赋值回显（接口晚到场景）；完整坐标出现「复制 / 清空」，清空落 undefined。

<script setup lang="ts">
/** 场景：受控回显与清空——外部异步赋值、清空按钮、change 事件面板 */
import { ref } from 'vue'
import { BizCoordinateInput } from 'vue3-ep-biz-lib'
import type { BizCoordinateValue } from 'vue3-ep-biz-lib'

const coord = ref<BizCoordinateValue | undefined>()
const lastChange = ref('（尚未变更）')

const fillRemote = (): void => {
  // 模拟接口晚到回显（门店详情）
  setTimeout(() => {
    coord.value = { lng: 113.264385, lat: 23.129112 }
  }, 300)
}
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 560px">
    <BizCoordinateInput v-model="coord" @change="(v) => (lastChange = v === undefined ? 'undefined（已清空）' : JSON.stringify(v))" />
    <el-space>
      <el-button size="small" type="primary" @click="fillRemote">模拟接口回显（广州）</el-button>
    </el-space>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      change 事件：<code>{{ lastChange }}</code>；完整坐标出现「复制 / 清空」操作，清空落 undefined。
    </p>
  </el-space>
</template>

显示代码

坐标系标注

WGS-84GCJ-02BD-09

经度

纬度

GCJ-02（国测局）

标签仅作口径提示：不同坐标系坐标不可直接混用（GCJ-02 相对 WGS-84 有非线性偏移）， 组件不做偏移换算，换算请在业务层完成并按系存储。

coordinate-system 提示性标签：不同坐标系坐标不可直接混用，换算由业务层完成。

<script setup lang="ts">
/** 场景：坐标系标注——wgs84 / gcj02 / bd09 提示性标签（不做偏移换算） */
import { ref } from 'vue'
import { BizCoordinateInput } from 'vue3-ep-biz-lib'
import type { BizCoordinateSystem } from 'vue3-ep-biz-lib'

const system = ref<BizCoordinateSystem>('gcj02')
const coord = ref({ lng: 116.403963, lat: 39.915119 })
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 560px">
    <el-radio-group v-model="system">
      <el-radio-button value="wgs84">WGS-84</el-radio-button>
      <el-radio-button value="gcj02">GCJ-02</el-radio-button>
      <el-radio-button value="bd09">BD-09</el-radio-button>
    </el-radio-group>
    <BizCoordinateInput v-model="coord" :coordinate-system="system" />
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      标签仅作口径提示：不同坐标系坐标不可直接混用（GCJ-02 相对 WGS-84 有非线性偏移），
      组件不做偏移换算，换算请在业务层完成并按系存储。
    </p>
  </el-space>
</template>

显示代码

复制与粘贴分发

经度

纬度

「复制」写入 lng,lat 文本；在任一输入框内粘贴 116.397428, 39.90923（逗号 / 空格 / 中文逗号分隔） 自动分发两框——从 Excel、微信、工单里拷坐标的常见动线。

一键复制 lng,lat；在输入框粘贴坐标文本（逗号 / 空格分隔）自动分发两框。

<script setup lang="ts">
/** 场景：复制与粘贴分发——一键复制 'lng,lat'、粘贴坐标文本自动拆两框 */
import { ref } from 'vue'
import { BizCoordinateInput } from 'vue3-ep-biz-lib'
import type { BizCoordinateValue } from 'vue3-ep-biz-lib'

const coord = ref<BizCoordinateValue | undefined>({ lng: 120.153576, lat: 30.287459 })
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 560px">
    <BizCoordinateInput v-model="coord" />
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      「复制」写入 <code>lng,lat</code> 文本；在任一输入框内粘贴 <code>116.397428, 39.90923</code>（逗号 / 空格 / 中文逗号分隔）
      自动分发两框——从 Excel、微信、工单里拷坐标的常见动线。
    </p>
  </el-space>
</template>

显示代码

设备点位表单集成

新增巡检点位

设备名称

点位坐标

经度

纬度

GCJ-02（国测局）

ElForm 规则 + expose validate() 联动：名称必填与坐标完整性一起校验后提交。

<script setup lang="ts">
/** 场景：设备点位表单集成——ElForm 规则 + validate() 联动提交 */
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { BizCoordinateInput } from 'vue3-ep-biz-lib'
import type { BizCoordinateValue } from 'vue3-ep-biz-lib'

const formRef = ref<FormInstance>()
const coordRef = ref()

const form = reactive({
  name: '东门闸机-03',
  coord: undefined as BizCoordinateValue | undefined,
})

const rules = {
  name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
}

const onSubmit = (): void => {
  if (formRef.value === undefined) return
  void formRef.value.validate((valid) => {
    const coordResult = coordRef.value?.validate()
    if (!valid || coordResult === undefined || !coordResult.valid) {
      ElMessage.warning('请补全设备名称与坐标')
      return
    }
    ElMessage.success(`已保存：${form.name} @ ${form.coord?.lng},${form.coord?.lat}`)
  })
}
</script>

<template>
  <el-card shadow="never" style="width: 560px">
    <template #header>新增巡检点位</template>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
      <el-form-item label="设备名称" prop="name">
        <el-input v-model="form.name" maxlength="20" />
      </el-form-item>
      <el-form-item label="点位坐标">
        <BizCoordinateInput ref="coordRef" v-model="form.coord" coordinate-system="gcj02" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存点位</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

显示代码

地理围栏顶点列表

电子围栏顶点

2 / 3 已完整

1

经度

纬度

2

经度

纬度

3

经度

纬度

多坐标录入实战：顶点增删、完整计数、复制 GeoJSON 风格坐标串。

<script setup lang="ts">
/** 场景：地理围栏顶点列表——多个坐标录入 + 复制 GeoJSON 风格坐标串 */
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { BizCoordinateInput } from 'vue3-ep-biz-lib'
import type { BizCoordinateValue } from 'vue3-ep-biz-lib'

const points = ref<Array<BizCoordinateValue | undefined>>([
  { lng: 116.391, lat: 39.907 },
  { lng: 116.402, lat: 39.907 },
  undefined,
])

const completePoints = computed(() => points.value.filter((p): p is BizCoordinateValue => p !== undefined))

const addPoint = (): void => {
  points.value.push(undefined)
}

const removePoint = (index: number): void => {
  points.value.splice(index, 1)
}

const copyRing = (): void => {
  if (completePoints.value.length < 3) {
    ElMessage.warning('围栏至少 3 个顶点')
    return
  }
  const text = completePoints.value.map((p) => `[${p.lng}, ${p.lat}]`).join(', ')
  void navigator.clipboard.writeText(text).then(() => ElMessage.success(`已复制 ${completePoints.value.length} 个顶点`))
}
</script>

<template>
  <el-card shadow="never" style="width: 620px">
    <template #header>
      <el-space>
        电子围栏顶点
        <el-tag size="small" effect="plain">{{ completePoints.length }} / {{ points.length }} 已完整</el-tag>
      </el-space>
    </template>
    <el-space direction="vertical" size="large" style="width: 100%">
      <el-space v-for="(p, i) in points" :key="i" style="width: 100%">
        <el-tag size="small" style="width: 44px; justify-content: center">{{ i + 1 }}</el-tag>
        <BizCoordinateInput
          :model-value="p"
          style="flex: 1"
          @update:model-value="(v) => (points[i] = v)"
        />
        <el-button size="small" text type="danger" :disabled="points.length <= 1" @click="removePoint(i)">删除</el-button>
      </el-space>
      <el-space>
        <el-button size="small" :icon="Plus" @click="addPoint">加顶点</el-button>
        <el-button size="small" type="primary" plain @click="copyRing">复制坐标串</el-button>
      </el-space>
    </el-space>
  </el-card>
</template>

显示代码

Props

属性名	类型	默认值	说明
model-value / v-model	BizCoordinateValue | undefined	—	坐标值 { lng, lat }（两项同时有值才完整；清空为 undefined）
placeholder	string	'如 116.397428'	输入占位提示
disabled	boolean	false	禁用（含度分秒切换 / 复制 / 清空按钮）
precision	number	6	小数位数上限（0-8，输入自动截断 + 校验）
allow-dms	boolean	true	允许切换度分秒（DMS）只读展示
coordinate-system	'wgs84' | 'gcj02' | 'bd09'	—	坐标系标注标签（提示性，不做偏移换算）
show-error	boolean	true	失焦校验失败时是否在下方展示原因
copyable	boolean	true	完整坐标时显示一键复制 lng,lat
clearable	boolean	true	完整坐标时显示清空按钮

BizCoordinateValue： { lng: number; lat: number }——十进制度，东经 / 北纬为正。

Events

事件名	参数	说明
update:model-value	(value: BizCoordinateValue | undefined)	坐标变更落值（两项同时有值为对象，否则 undefined）
change	(value: BizCoordinateValue | undefined)	同 update:model-value（输入 / 粘贴 / 清空均触发）
blur	(valid: boolean)	失焦校验结果外抛（表单联动用）

Expose

属性/方法	类型	说明
validate	() => { valid: boolean; message: string }	触发校验（空值视为通过；必填由表单规则控制）
getDms	() => { lng: string; lat: string }	度分秒换算结果（字段缺省为 '—'）
focus	() => void	聚焦经度输入框