MapBox根据鼠标位置显示经纬度组件

只需要将map实例传进来就可以了，可以通过props，也可以通过vuex、pinia等。原理就是监听mousemove事件，将经纬度取出来就可以，完整组件如下。

<template>
  <div class="mouse-position" @click="copyLngLat" title="点击可复制横纵坐标,地图上的点可以先右键使经纬度不动，再来点击复制">
    <div class="content">
      <span>{{`经度：${lngLat.lng}`}}</span>
      <span>{{`纬度：${lngLat.lat}`}}</span>
    </div>
    <div class="__mouse__status" v-show="isShowTip">
      <div class="svg-wrapper">
        <svg t="1588512684752" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2024" width="16" height="16">
        <path d="M435.2 768L908.8 294.4 864 249.6 412.8 700.8l-230.4-230.4-44.8 44.8 252.8 252.8z" fill="#67C23A" p-id="2025"></path></svg>
      </div>
      <span>已复制</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MousePosition',
  data () {
    return {
      lngLat: {
        lng: 115,
        lat: 36
      },
      options: {
        accuracy: 2
      },
      isShowTip: false,
      map:null
    }
  },
  props:['mapLoad'],
  // computed: {
  //   map () {
  //     return this.$store.state.map.map
  //   }
  // },
  watch: {
    mapLoad:{
      handler:function(newVal,oldVal){
        this.map = newVal,
        this.getLngLat()
      }
    }
  },
  // mounted () {
  //   this.getLngLat()
  // },
  methods: {
    // 获取经纬度坐标
    getLngLat () {
      this.map.on('mousemove', (e) => {
        const accu = this.options.accuracy
        this.lngLat.lng = e.lngLat.lng.toFixed(accu) // 经度
        this.lngLat.lat = e.lngLat.lat.toFixed(accu) // 纬度
      })
    },

    // 点击copy经纬度
    copyLngLat () {
      this._simpleCopy(this.lngLat)
      this.copyTip()
    },

    // 简单copy
    _simpleCopy (lngLat, cb) {
      const input = document.createElement('input')
      input.setAttribute('id', '__mouse__position_input')
      input.value = `${lngLat.lng}  ${lngLat.lat}`
      document.querySelector('body').appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      // this.copyTip()
    },
    copyTip () {
      if (!this.isShowTip) {
        this.isShowTip = true
        this.timer = setTimeout(() => {
          this.isShowTip = false
        }, 1000)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.mouse-position {
  position: relative;
  background: #FFFFFF;
  padding: 0 10px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #dddddd;
  border-radius: 4px;
  width: 220px;

  .content {
    span {
      display: inline-block;
      width: 90px;
      height: 24px;
      line-height: 24px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #44474A;
      letter-spacing: 0;
      &:first-child {
        margin-right: 10px;
      }
    }
  }

  .__mouse__status {
    position: absolute;
    top: -40px;
    right: 0;
    padding: 0 6px;
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
    background-color: #FFFFFF;
    animation: fade ease-in 0.2s;

    .svg-wrapper {
      display: inline-block;
      vertical-align: sub;
    }

    .__mouse__status span {
      display: inline-block;
      margin-left: 2px;
    }
  }

  @keyframes fade {
    from {
      top: 0;
      opacity: 0;
    }
    to {
      top: -40px;
      opacity: 1;
    }
  }

}
</style>