fix(unitManage): 修复单位管理地图组件初始化问题
- 修改城市选择逻辑,使用 labels[1] 而不是 labels[0]- 优化地图组件初始化流程,确保在地图实例存在时执行相关操作 - 添加焦点事件处理,解决地图组件未初始化时的错误 - 优化代码结构,提高可读性和维护性
This commit is contained in:
parent
44861bb66c
commit
be88ef1658
|
@ -61,7 +61,7 @@ const saveOrUpdateEnterprisesUnit = (params: _FormType, callback: Function) => {
|
||||||
required: true,
|
required: true,
|
||||||
componentsProps: {
|
componentsProps: {
|
||||||
displayRender: ({labels}): string => {
|
displayRender: ({labels}): string => {
|
||||||
city = labels[0]
|
city = labels[1]
|
||||||
return labels.join(' / ');
|
return labels.join(' / ');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -77,23 +77,6 @@ const saveOrUpdateEnterprisesUnit = (params: _FormType, callback: Function) => {
|
||||||
ref={_mapRef}
|
ref={_mapRef}
|
||||||
style={{width: '100%', height: '300px', position: 'relative'}}
|
style={{width: '100%', height: '300px', position: 'relative'}}
|
||||||
initCallback={(map) => {
|
initCallback={(map) => {
|
||||||
AMap.plugin(['AMap.AutoComplete'], () => {
|
|
||||||
//@ts-ignore
|
|
||||||
const auto = new AMap.AutoComplete({
|
|
||||||
city,
|
|
||||||
input: "tipinput"
|
|
||||||
});
|
|
||||||
//注册监听,当选中某条记录时会触发
|
|
||||||
auto.on("select", (e) => {
|
|
||||||
//有些点位可能没有经纬度信息
|
|
||||||
if (!e.poi.location) {
|
|
||||||
message.error('所选点位没有经纬度信息 建议选则附近的手动移动!');
|
|
||||||
return
|
|
||||||
}
|
|
||||||
_formParams.value.point = e.poi.location
|
|
||||||
initMarker(map)
|
|
||||||
});
|
|
||||||
})
|
|
||||||
if (_formParams.value.point) {
|
if (_formParams.value.point) {
|
||||||
initMarker(map)
|
initMarker(map)
|
||||||
}
|
}
|
||||||
|
@ -103,6 +86,31 @@ const saveOrUpdateEnterprisesUnit = (params: _FormType, callback: Function) => {
|
||||||
<input id={'tipinput'}
|
<input id={'tipinput'}
|
||||||
placeholder={'请输入详细地址'}
|
placeholder={'请输入详细地址'}
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
|
onFocus={() => {
|
||||||
|
if (!_mapRef.value.mapInstance) {
|
||||||
|
message.error('地图组件尚未初始化成功 请重新打开页面')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
//@ts-ignore
|
||||||
|
_mapRef.value.mapInstance.plugin(['AMap.AutoComplete'], () => {
|
||||||
|
//@ts-ignore
|
||||||
|
const auto = new AMap.AutoComplete({
|
||||||
|
city: city,
|
||||||
|
input: "tipinput",
|
||||||
|
citylimit: true
|
||||||
|
});
|
||||||
|
//注册监听,当选中某条记录时会触发
|
||||||
|
auto.on("select", (e) => {
|
||||||
|
//有些点位可能没有经纬度信息
|
||||||
|
if (!e.poi.location) {
|
||||||
|
message.error('所选点位没有经纬度信息 建议选则附近的手动移动!');
|
||||||
|
return
|
||||||
|
}
|
||||||
|
_formParams.value.point = e.poi.location
|
||||||
|
initMarker(_mapRef.value.mapInstance)
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</MapContainer>
|
</MapContainer>
|
||||||
|
|
Loading…
Reference in New Issue