（十二）基于 Vue 3 和 Mapbox GL 实现的坐标拾取器组件示例

下面是一个基于 Vue 3 和 Mapbox GL 实现的坐标拾取器组件示例：

<template>
  <div class="map-container">
    <div ref="mapContainer" class="map"></div>
    <div class="coordinates-box">
      <div v-if="clickedCoordinates">
        点击坐标：{
  { clickedCoordinates.lng.toFixed(4) }}, {
  { clickedCoordinates.lat.toFixed(4) }}
        <button @click="copyCoordinates">复制</button>
      </div>
      <div>
        当前坐标：{
  { currentLng.toFixed(4) }}, {
  { currentLat.toFixed(4) }}
      </div>
      <div v-if="copyStatus" class="copy-status">{
  { copyStatus }}&