<template>
|
<!--二维码位置-->
|
<div class="myQrCode" id="myQrCode" ref="myQrCode"></div>
|
</template>
|
|
<script setup>
|
import { wgs84ToGcj02 } from '@/utils/coordinateTransformation';
|
import QRCode from 'qrcodejs2-fix'
|
const props = defineProps(['latAndLon'])
|
|
const myQrCode = ref(null)
|
let qrCodeInstance = null
|
|
const createQRcode = content => {
|
const transformed = wgs84ToGcj02(content[0], content[1])
|
if (!content) return
|
if (qrCodeInstance) {
|
myQrCode.value.innerHTML = ''
|
}
|
// 生成新二维码
|
qrCodeInstance = new QRCode(myQrCode.value, {
|
width: 92,
|
height: 91,
|
text: `https://uri.amap.com/marker?position=${transformed}&name=%E4%BA%8B%E4%BB%B6%E7%82%B9`,
|
})
|
}
|
watch(
|
() => props.latAndLon,
|
newVal => {
|
if (newVal) {
|
nextTick(() => {
|
createQRcode(newVal)
|
})
|
}
|
},
|
{ immediate: true }
|
)
|
onMounted(async () => {})
|
</script>
|
|
<style lang="scss" scoped>
|
.myQrCode {
|
padding: 2px;
|
background: #fff;
|
}
|
</style>
|
