EarthSDK中点击地图，跟随鼠标出现经纬度弹框（vue）

最新推荐文章于 2024-08-28 17:54:35 发布

熊抱抱的一粒

最新推荐文章于 2024-08-28 17:54:35 发布

阅读量1.1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52959651/article/details/120880864

版权

本文展示了如何在Vue项目中使用EarthSDK，当点击地图时，能实时显示鼠标位置的经纬度坐标。遇到的主要挑战是正确引入EarthSDK的JS包，作者提示注意官方文档，并计划分享完整的项目代码。

摘要由CSDN通过智能技术生成

效果图
在这里插入图片描述

当我点击地图时，鼠标点击的上方出现这个弹框

代码

<template>
  <div>
    <div style="width: 95%; height: 95%; position: relative; overflow: hidden">
      <!-- 点击效果 -->
      <div>
        <div
          ref="earthContainer"
          @click="scanelineClick"
          style="width: 100%; height: 100%"
        ></div>
      </div>
 
      <div
        class="boxsss"
        :style="{
          display: isShow,
          left: floatLeft,
          top: floatTop,
          position: floatposition,
          color: floatcolor,
          padding: floatpadding,
          background: floatbackground,
        }"
        v-show="floatshow"
      >
        <span>经度：{
  { position[0] | numFilter2 }}°</span>
        <span>纬度：{
  { position[1] | numFilter2 }}°</span>
        <span>高度：{
  { position[2] | numFilter }}m</span>
      </div>
    </div&g