介绍

百度地图位置（经纬度）选择示例

• 百度地图key申请网址

安装使用

1.【系统配置】【第三方密钥】配置百度地图Key
2. 需要用到位置(经纬度)选择的页面，复制以下代码（参考web/src/views/backend/examples/bmap/popupForm.vue）

<div v-if="state.showBmapContainer">
    <BmapContainer
        :bmapKey="state.bmapKey"
        @child-confirm-clicked="handleChildConfirmClicked"
        @child-cancel-clicked="handleChildCancelClicked"
    />
</div>

// 导入
import BmapContainer from '/@/components/xmmap/bmapContainer.vue'
// getBmapKey获取百度地图key，可替换成自己的方法
import { getBmapKey } from '/@/api/backend/xmmap/bmap'

const state = reactive({
    showBmapContainer: false,
    bmapKey: '',
})
// 获取百度地图key，可替换自己的接口
getBmapKey().then((res) => {
    state.bmapKey = res.data
})
// 弹窗打开百度地图
const openMapPickPop = () => {
    state.showBmapContainer = true
}
// 点击确认获取当前位置信息
const handleChildConfirmClicked = (data: { showBmapContainer: boolean; poiname: any; poiaddress: any; longitude: any; latitude: any }) => {
    console.log('百度地图获取当前位置信息', data)
    state.showBmapContainer = data.showBmapContainer
}
// 点击取消关闭地图弹窗
const handleChildCancelClicked = (data: { showBmapContainer: boolean }) => {
    state.showBmapContainer = data.showBmapContainer
}

温馨提示

您可能需要在看懂示例后清理多余的示例代码，而本示例模块提供了一个新的组件，组件又无需被清理，您可以利用模块卸载且保留某文件的功能，操作步骤如下

1. modules->bmap目录找到config.json文件

2. 文件内容为

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

3. 模块添加的系统配置，也会在卸载时被清理，您可以查看modules->bmap->Bmap.php文件，去除其中在模块禁用时清理系统配置的操作
4. 此时卸载模块，新的组件代码将被保留（默认未做此配置，因为模块设计要求卸载时清理所有文件）