You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.3 KiB
66 lines
1.3 KiB
2 years ago
|
import { Image } from 'ant-design-vue';
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<a-button
|
||
|
|
type="link"
|
||
|
|
target="_blank"
|
||
|
|
:href="
|
||
|
|
'https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=' +
|
||
|
|
locationY +
|
||
|
|
'&pointy=' +
|
||
|
|
locationX +
|
||
|
|
'&name=' +
|
||
|
|
label +
|
||
|
|
'&ref=yudao'
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<Image
|
||
|
|
:src="
|
||
|
|
'https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|' +
|
||
|
|
locationX +
|
||
|
|
',' +
|
||
|
|
locationY +
|
||
|
|
'&key=' +
|
||
|
|
qqMapKey +
|
||
|
|
'&size=250*180'
|
||
|
|
"
|
||
|
|
/>
|
||
|
|
<Icon icon="ep:location" />
|
||
|
|
{{ label }}
|
||
|
|
</a-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup name="WxLocation">
|
||
|
|
import { Image } from 'ant-design-vue'
|
||
|
|
import Icon from '@/components/Icon'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
locationX: {
|
||
|
|
required: true,
|
||
|
|
type: Number
|
||
|
|
},
|
||
|
|
locationY: {
|
||
|
|
required: true,
|
||
|
|
type: Number
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
// 地名
|
||
|
|
required: true,
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
qqMapKey: {
|
||
|
|
// QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
|
||
|
|
required: false,
|
||
|
|
type: String,
|
||
|
|
default: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E' // 需要自定义
|
||
|
|
}
|
||
|
|
})
|
||
|
|
defineExpose({
|
||
|
|
locationX: props.locationX,
|
||
|
|
locationY: props.locationY,
|
||
|
|
label: props.label,
|
||
|
|
qqMapKey: props.qqMapKey
|
||
|
|
})
|
||
|
|
</script>
|