下面是一个基于 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 }}&