介绍

腾讯地图位置（经纬度）选点组件和示例代码

腾讯地图key申请网址

安装使用

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

导入  
import { openTencentMapPickPop } from '/@/components/xmmap/tencentMap'
// getTencentmapKey 从服务端获取腾讯地图key，可替换成自己的方法
import { getTencentmapKey } from '/@/api/backend/xmmap/tencentmap'
import { ElNotification } from 'element-plus'

const state = reactive({
    tencentMapKey: '',
})
// 获取腾讯地图key，可替换自己的接口
index().then((res) => {
    state.tencentMapKey = res.data
})
// 弹窗打开地图方法
const openMapPickPop = () => {
    if (state.tencentMapKey == '') {
        ElNotification({
            type: 'error',
            message: '请前往【系统配置】【第三方密钥】配置腾讯地图KEY',
        })
        return false
    }
    openTencentMapPickPop(state.tencentMapKey)
}
window.addEventListener('message', function (event) {
    if (event.data.type == 'tencent-map-data') {
        const currentData = JSON.parse(event.data.data)
        console.log('腾讯地图当前位置数据：', currentData)
    }
})

温馨提示

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

1. modules->tencentmap目录建立config.json文件
2. 文件内容为

{
    "protectedFiles": ["web/src/components/xmmap/tencentMap.ts"]
}

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