LocPicker 地图选点

封装了腾讯位置服务的地图选点服务组件。

弹窗使用

<template>
<dg-loc-picker @confirm="onConfirm" ref="locPickerRef" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { LocPickerResult } from '@degon/admin-component-vue3'
const locPickerRef = ref()

// 打开弹窗
locPickerRef.value.open()

const onConfirm = (data: LocPickerResult) => {
  // 位置信息
  console.log(data)
}
</script>

以页面方式使用

<template>
<!-- 选择的位置结果在backurl的参数上回调  -->
<dg-loc-picker :type="0" backurl="http://baidu.com" />

<!-- 自定义触发内容 -->
<dg-loc-picker :type="0" backurl="http://baidu.com">
  <template #trigger>
    <el-button size="small" plain type="primary">选择位置</el-button>
  </template>
</dg-loc-picker>
</template>

Attributes

参数	类型	说明	可选值	默认值
type	number	0: 以页面跳转的方式调用, 1: 以iframe内嵌页面的弹窗调用	0、1	1
backurl	string	type=0时，回调地址，选择的位置结果在参数上面	-	-
ak	string	开发密钥(key), 若您的key已设置webservice域名白名单，请在 白名单 中增加地图选点组件域名	-	'XLBBZ-AZ43K-IGHJZ-AX6K6-AL67S-HAFWN'
referer	string	调用来源，一般为您的应用名称，为了保障对您的服务，请务必填写	-	'alzheimer'
params	object	其它腾讯地图选点组件的参数，参见	-	-
title	string	弹窗标题或trigger按钮文字	-	'选择地址'
height	string	iframe高度	-	'400px'

Methods

方法名	说明	参数
open	打开弹窗	-

Slot

name	说明	参数
trigger	触发跳转到地图选点页面的内容	-

Events

事件名	说明	参数
close	弹窗关闭后触发
confirm	选择位置确定后触发	位置信息LocPickerResult