55 lines
1.5 KiB
Vue
55 lines
1.5 KiB
Vue
<script lang="ts" setup>
|
||
import { computed } from 'vue';
|
||
|
||
import { IconifyIcon } from '@vben/icons';
|
||
|
||
import { Col, Row } from 'ant-design-vue';
|
||
|
||
defineOptions({ name: 'WxLocation' });
|
||
|
||
// TODO @dylan：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
label: string;
|
||
locationX: number;
|
||
locationY: number;
|
||
qqMapKey?: string;
|
||
}>(),
|
||
{
|
||
qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
|
||
},
|
||
);
|
||
|
||
const mapUrl = computed(() => {
|
||
return `https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${props.locationY}&pointy=${props.locationX}&name=${props.label}&ref=yudao`;
|
||
});
|
||
|
||
const mapImageUrl = computed(() => {
|
||
return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${props.qqMapKey}&size=250*180`;
|
||
});
|
||
|
||
defineExpose({
|
||
locationX: props.locationX,
|
||
locationY: props.locationY,
|
||
label: props.label,
|
||
qqMapKey: props.qqMapKey,
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 微信消息 - 定位 -->
|
||
<div>
|
||
<a :href="mapUrl" target="_blank" class="text-primary">
|
||
<Col>
|
||
<Row>
|
||
<img :src="mapImageUrl" alt="地图位置" />
|
||
</Row>
|
||
<Row class="mt-2">
|
||
<IconifyIcon icon="mdi:map-marker" class="mr-1" />
|
||
{{ label }}
|
||
</Row>
|
||
</Col>
|
||
</a>
|
||
</div>
|
||
</template>
|