介绍

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

高德地图key申请网址

添加Key时，服务平台选择 Web端(JS API)

高德地图的选点组件是使用Js编写的，这是为了更好的与第三方兼容；同时，本模块可以作为js组件的示例。

安装使用

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

<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
}

温馨提示

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

1. modules->amap目录找到config.json文件
2. 文件中添加如下的protectedFiles字段

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

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