<script setup lang="ts"> import { createApp } from 'vue' import App from './App.vue' import AMap from 'vue3-amap' const app = createApp(App) app.use(AMap) 完善代码使可在当前.vue文件中呈现在地图上显示实时位置

好的，下面是完整的代码：

<template>
  <div>
    <amap-map
      :center="center"
      :zoom="zoom"
      style="width: 100%; height: 500px"
    >
      <amap-marker :position="position"></amap-marker>
    </amap-map>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import AMap from 'vue3-amap'

const state = reactive({
  center: [116.397428, 39.90923], // 地图中心点经纬度
  zoom: 13, // 地图缩放级别
  position: [116.397428, 39.90923], // 标记点位置经纬度
})

onMounted(() => {
  // 初始化地图插件
  AMap.initAMapApiLoader({
    key: 'YOUR_API_KEY', // 你的高德地图 Key
    plugin: [], // 需要使用的插件列表
    // 更多配置项...
  }).then(() => {
    // 获取当前位置
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const { longitude, latitude } = position.coords
        state.center = [longitude, latitude] // 更新地图中心点
        state.position = [longitude, latitude] // 更新标记点位置
      },
      (error) => {
        console.error(error)
      }
    )
  })
})
</script>

上述代码中，我们使用 `reactive` 函数创建了一个响应式的 `state` 对象，其中包含了地图的中心点、缩放级别和标记点的位置。

在 `onMounted` 钩子函数中，我们调用了 `AMap.initAMapApiLoader` 方法初始化地图插件，并通过 `navigator.geolocation.getCurrentPosition` 方法获取了当前位置信息，并将其更新到 `state` 对象中，从而实现了在地图上显示实时位置的效果。

注意：在上述代码中，你需要替换 `YOUR_API_KEY` 为你自己的高德地图 Key。同时，如果你在本地开发环境中运行上述代码，可能需要开启浏览器的定位权限才能正常获取位置信息。