将代码转换为vue3

要将提供的代码转换为 Vue 3 组件，可以将其封装在一个 Vue 3 单文件组件（SFC）中，并使用 Composition API 或 Options API 来实现功能。以下是使用 Composition API 的示例：

### 使用 Composition API 的 Vue 3 组件

<template>
  <div>
    <button @click="transformCoordinates">Transform Coordinates</button>
    <p>Original Coordinates: {{ originalCoordinates }}</p>
    <p>Transformed Coordinates: {{ transformedCoordinates }}</p>
  </div>
</template>

<script setup>
import { ref } onMounted from 'vue';
import gcoord from 'gcoord';

const originalCoordinates = ref([39.9042, 116.4074]); // 示例坐标：北京经纬度
const transformedCoordinates = ref([]);

function gcoordTransform(lat, lng) {
  const gcoordLngLat = gcoord.transform([lng, lat], gcoord.WGS84, gcoord.GCJ02);
  return [gcoordLngLat[1], gcoordLngLat[0]];
}

function gcoordTransGCJ02ToWGS84(lngLat) {
  const gcoordLngLat = gcoord.transform(lngLat, gcoord.GCJ02, gcoord.WGS84);
  return gcoordLngLat;
}

function transformCoordinates() {
  const [lat, lng] = originalCoordinates.value;
  transformedCoordinates.value = gcoordTransform(lat, lng);
}
</script>

<style scoped>
/* 添加一些样式 */
</style>

### 解释

1. **模板部分 (`<template>`)**:
- 一个按钮用于触发坐标转换。
- 显示原始坐标和转换后的坐标。

2. **脚本部分 (`<script setup>`)**:
- 导入 `ref` 和 `onMounted` 从 `vue` 模块。
- 导入 `gcoord` 库。
- 定义两个响应式变量 `originalCoordinates` 和 `transformedCoordinates`。
- 实现 `gcoordTransform` 和 `gcoordTransGCJ02ToWGS84` 函数，与原代码逻辑相同。
- 定义 `transformCoordinates` 方法，该方法在点击按钮时调用，将原始坐标转换为目标坐标并更新 `transformedCoordinates`。

3. **样式部分 (`<style scoped>`)**:
- 可以添加一些样式来美化组件。

这样，你就将原来的 JavaScript 代码成功地转换为了一个 Vue 3 组件。你可以根据需要进一步调整和扩展这个组件的功能。