<div v-if="state.showAmapContainer">
	<AmapContainer 
	    :amapKey="state.amapKey"
	    :securityJsCode="state.securityJsCode"
	    @child-confirm-clicked="handleChildConfirmClicked"
	    @child-cancel-clicked="handleChildCancelClicked"
	/>
</div>

// 导入
import AmapContainer from '/@/components/xmmap/amapContainer.vue'
// getAmapConfig获取高德地图key，可替换成自己的方法
import { getAmapConfig } from '/@/api/backend/xmmap/amap'

const state = reactive({
    showAmapContainer: false,
    amapKey: '',
    securityJsCode: '',
})
// 获取高德地图key与securityJsCode，可替换自己的接口
getAmapConfig().then((res) => {
    state.amapKey = res.data.amapKey
    state.securityJsCode = res.data.securityJsCode
})
// 弹窗打开高德地图
const openMapPickPop = () => {
    state.showAmapContainer = true
}
// 点击确认获取当前位置信息
const handleChildConfirmClicked = (data) => {
    console.log(data,'amapConfirmData');
    state.showAmapContainer = data.showAmapContainer
    baTable.form.items!.poiname = data.poiname
    baTable.form.items!.poiaddress = data.poiaddress
    baTable.form.items!.longitude = data.longitude
    baTable.form.items!.latitude = data.latitude
}
// 点击取消关闭地图弹窗
const handleChildCancelClicked = (data) => {
    state.showAmapContainer = data.showAmapContainer
}

{
    "protectedFiles": ["web/src/components/xmmap/amapContainer.vue"]
}