文档

Appearance

经纬度选择 ​

效果展示 ​

  • 双输入框都可点击

注意点 ​

  1. 选择经纬度样式并不统一，这里选择的是输入框点击选点。经纬度选择相同的点是地图弹窗，然后点击选择某一个地点，然后点击确定拿到经纬度

  2. 使用的是腾讯地图

使用 ​

  1. 使用全局组件 n-locpicker

  2. 组件使用插槽，可包裹任意内容进行显示，不包裹具体内容不会显示。点击即可触发选点弹窗

  3. 事件confirmSelect 拿到选择的经纬度信息

示例：
selectLoc: function (e) {
    formAddressConf.objForm.oLongitude = e.latlng.lng.toString()
    formAddressConf.objForm.oLatitude = e.latlng.lat.toString()
}

完整代码

HTML
<n-locpicker @confirmSelect="selectLoc">
    <a-input-group compact>
        <a-input v-model:value="objForm.oLongitude" style="width: 50%" placeholder="经度" id="oLongitude" name="oLongitude" extra=""></a-input>
        <a-input v-model:value="objForm.oLatitude" style="width: 50%" placeholder="纬度" id="oLatitude" name="oLatitude" extra="">
            <template #suffix>
                <SearchOutlined/>
            </template>
        </a-input>
    </a-input-group>
</n-locpicker>

JS
selectLoc: function (e) {
    formAddressConf.objForm.oLongitude = e.latlng.lng.toString()
    formAddressConf.objForm.oLatitude = e.latlng.lat.toString()
}