javascript - 带有自定义标记和图标调整大小的 vue2-google-maps 出现问题，在缩小时放错了位置-6ren

javascript - 带有自定义标记和图标调整大小的 vue2-google-maps 出现问题，在缩小时放错了位置

转载作者：行者123 更新时间：2023-12-01 16:16:55

Vue.use(VueGoogleMaps, {
  load: {
    key: ''
  },
});

new Vue({
  el: '#root',
  computed:{
    icon(){
        if (this.resized)
            return {
            url:"https://i.ibb.co/bdykLz4/test.png",
            size: { width: 100, height: 100, f: "px", b: "px" },
            scaledSize: { width: 50, height: 50, f: "px", b: "px" }
                
            }
        else
            return {
            url:"https://i.ibb.co/bdykLz4/test.png"
            }
      
    }
  },
  data: {
    resized:true,
    startLocation: {
      lat: 38.7126659,
      lng: -9.3051496
    },
    coordinates: {
      0: {
        full_name: 'Point 1',
      lat: 38.7226659,
      lng: -9.3151496
      },
      1: {
        full_name: 'Point 2',
      lat: 38.7136659,
      lng: -9.3061496
      }
    },
  },
  methods: {
    getPosition: function(marker) {
      return {
        lat: parseFloat(marker.lat),
        lng: parseFloat(marker.lng)
      }
    },
  }
});

<script src="https://xkjyeah.github.io/vue-google-maps/vue-google-maps.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
  <div id="root">
    <gmap-map ref="mymap" :center="startLocation" :zoom="14" style="width: 100%; height: 500px">

      <gmap-marker v-for="(item, key) in coordinates" :key="key" :position="getPosition(item)" :icon="icon"/>

    </gmap-map>
    Resized: <input type="checkbox" id="checkbox" v-model="resized" >
  </div>

</body>

我正在尝试将自定义标记与 vue2-google-maps 一起使用，但发现了一个奇怪的行为。
如果我使用 png 图像(例如 100x100 像素)并将属性设置为将其大小调整为 50x50 像素，则当我开始缩小时，标记开始远离坐标。
如果我没有使用 resize 属性，就没有问题。
我已经搜索了很多关于这个问题的信息，但找不到任何东西。
我准备了一个 JSFiddle，只需取消选中复选框，在缩小期间一切正常，但如果你让复选框标记并开始缩小，你会看到标记进入海洋，而它应该在葡萄牙。
传递给 icon 属性的对象的区别是:
检查时:

{
   url:"https://i.ibb.co/bdykLz4/test.png",
   size: { width: 100, height: 100, f: "px", b: "px" },
   scaledSize: { width: 50, height: 50, f: "px", b: "px" }
}

未选中时:

{
   url:"https://i.ibb.co/bdykLz4/test.png",
}

这是 fiddle :
https://jsfiddle.net/5dw83v7g/3/
更新:如果我保持“size”和“scaledSize”相同，问题就会消失
此致，
TIA

最佳答案

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_KEY'
  },
});

new Vue({
  el: '#root',
 computed:{
    icon(){
        if (this.resized)
            return {
            url:"https://i.ibb.co/bdykLz4/test.png",
            size: { width: 100, height: 100, f: "px", b: "px" },
            scaledSize: { width: 50, height: 50, f: "px", b: "px" }
                
            }
        else
            return {
            url:"https://i.ibb.co/bdykLz4/test.png"
            }
      
    }
    },
  data: {
    startLocation: {
      lat: 10.3157,
      lng: 123.8854
    },
    coordinates: {
      0: {
        full_name: 'Erich  Kunze',
        lat: '10.31',
        lng: '123.89'
      },
      1: {
        full_name: 'Delmer Olson',
        lat: '10.32',
        lng: '123.89'
      }
    },
    infoPosition: null,
    infoContent: null,
    infoOpened: false,
    infoCurrentKey: null,
    infoOptions: {
      pixelOffset: {
        width: 0,
        height: -35
      }
    },
  },
  methods: {
    getPosition: function(marker) {
      return {
        lat: parseFloat(marker.lat),
        lng: parseFloat(marker.lng)
      }
    },
    toggleInfo: function(marker, key) {
      this.infoPosition = this.getPosition(marker);
      this.infoContent = marker.full_name;
      if (this.infoCurrentKey == key) {
        this.infoOpened = !this.infoOpened;
      } else {
        this.infoOpened = true;
        this.infoCurrentKey = key;
      }
    }
  }
});

<script src="https://xkjyeah.github.io/vue-google-maps/vue-google-maps.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
  <div id="root">
    <gmap-map ref="mymap" :center="startLocation" :zoom="14" style="width: 100%; height: 500px">

      <gmap-marker v-for="(item, key) in coordinates" :key="key" :position="getPosition(item)" :icon="icon"/>

    </gmap-map>
    Resized: <input type="checkbox" id="checkbox" v-model="resized" >
  </div>

</body>

您必须像这样更改代码:

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_KEY'
  },
});

new Vue({
  el: '#root',
 computed:{
    icon(){
        if (this.resized)
            return {
            url:"https://i.ibb.co/bdykLz4/test.png",
            size: { width: 100, height: 100, f: "px", b: "px" },
            scaledSize: { width: 50, height: 50, f: "px", b: "px" }
                
            }
        else
            return {
            url:"https://i.ibb.co/bdykLz4/test.png"
            }
      
    }
    },
  data: {
    startLocation: {
      lat: 10.3157,
      lng: 123.8854
    },
    coordinates: {
      0: {
        full_name: 'Erich  Kunze',
        lat: '10.31',
        lng: '123.89'
      },
      1: {
        full_name: 'Delmer Olson',
        lat: '10.32',
        lng: '123.89'
      }
    },
    infoPosition: null,
    infoContent: null,
    infoOpened: false,
    infoCurrentKey: null,
    infoOptions: {
      pixelOffset: {
        width: 0,
        height: -35
      }
    },
  },
  methods: {
    getPosition: function(marker) {
      return {
        lat: parseFloat(marker.lat),
        lng: parseFloat(marker.lng)
      }
    },
    toggleInfo: function(marker, key) {
      this.infoPosition = this.getPosition(marker);
      this.infoContent = marker.full_name;
      if (this.infoCurrentKey == key) {
        this.infoOpened = !this.infoOpened;
      } else {
        this.infoOpened = true;
        this.infoCurrentKey = key;
      }
    }
  }
});

并在你的 body 中使用它:

<body>
  <div id="root">
    <gmap-map ref="mymap" :center="startLocation" :zoom="14" style="width: 100%; height: 300px">

      <gmap-info-window :options="infoOptions" :position="infoPosition" :opened="infoOpened" @closeclick="infoOpened=false">
        {{infoContent}}
      </gmap-info-window>

      <gmap-marker v-for="(item, key) in coordinates" :key="key" :position="getPosition(item)" :icon="icon"/>

    </gmap-map>
  </div>

</body>

我用了这个代码 here .

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_KEY'
  },
});

new Vue({
  el: '#root',
 computed:{
    icon(){
        if (this.resized)
            return {
            url:"https://i.ibb.co/bdykLz4/test.png",
            size: { width: 100, height: 100, f: "px", b: "px" },
            scaledSize: { width: 50, height: 50, f: "px", b: "px" }
                
            }
        else
            return {
            url:"https://i.ibb.co/bdykLz4/test.png"
            }
      
    }
    },
  data: {
    startLocation: {
      lat: 10.3157,
      lng: 123.8854
    },
    coordinates: {
      0: {
        full_name: 'Erich  Kunze',
        lat: '10.31',
        lng: '123.89'
      },
      1: {
        full_name: 'Delmer Olson',
        lat: '10.32',
        lng: '123.89'
      }
    },
    infoPosition: null,
    infoContent: null,
    infoOpened: false,
    infoCurrentKey: null,
    infoOptions: {
      pixelOffset: {
        width: 0,
        height: -35
      }
    },
  },
  methods: {
    getPosition: function(marker) {
      return {
        lat: parseFloat(marker.lat),
        lng: parseFloat(marker.lng)
      }
    },
    toggleInfo: function(marker, key) {
      this.infoPosition = this.getPosition(marker);
      this.infoContent = marker.full_name;
      if (this.infoCurrentKey == key) {
        this.infoOpened = !this.infoOpened;
      } else {
        this.infoOpened = true;
        this.infoCurrentKey = key;
      }
    }
  }
});

<script src="https://xkjyeah.github.io/vue-google-maps/vue-google-maps.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
  <div id="root">
    <gmap-map ref="mymap" :center="startLocation" :zoom="14" style="width: 100%; height: 500px">

      <gmap-marker v-for="(item, key) in coordinates" :key="key" :position="getPosition(item)" :icon="icon"/>

    </gmap-map>
    Resized: <input type="checkbox" id="checkbox" v-model="resized" >
  </div>

</body>

如果有帮助，请给我评分。非常感谢。

关于javascript - 带有自定义标记和图标调整大小的 vue2-google-maps 出现问题，在缩小时放错了位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63108240/

文章推荐： javascript - if/else 阻止违背我意愿的按钮点击事件

文章推荐： java - 在 JavaFX 中更新 TableCell 时的奇怪行为

文章推荐： javascript - 点击gotoPage方法后如何在livewire中调用JS函数？

c - 大小(数组)/大小(整数)
这个问题在这里已经有了答案: C sizeof a passed array [duplicate] (7 个回答) 8年前关闭。在一个函数中，我声明了一个数组: int char_count_ar
linux - 为什么文件系统有自己的 block 大小，而不是使用硬盘 block 大小？
简而言之，文件系统如何与 block 设备通信？最佳答案我对 block 大小不太了解。我认为 ext4(Linux)的文件系统的 block 大小是 4KB，考虑到现代处理器的页面大小(4KB)
mysql - tinyint(大小)，varchar(大小): "size" explaination
我知道 tinyint(1) 和 tinyint(2) 具有相同的存储空间范围。唯一的区别是显示宽度不同。这是否意味着 tinyint(1) 将存储所有类型的整数但只正确显示 0 到 9 的范围？而
c++ - 大小 8 的无效读取，大小 8 的无效写入 (Valgrind)
今晚我已经研究了以下代码几个小时，但我只是摸不着头脑。当使用函数从标准输入填充数组时，我不断收到“大小 8 的无效写入”和“大小 8 的无效读取”。如有任何帮助，我们将不胜感激...我知道 Sta
c - 大小 8 的无效读取，大小 8 的无效写入，C
我有一个 valgrind 错误，我不知道如何摆脱它们: ==5685== Invalid read of size 8 ==5685== at 0x4008A1: main (in /home
Hadoop block 大小 vs 拆分 vs block 大小
我对 Hadoop 的概念有点困惑。 Hadoop block 大小、拆分大小和 block 大小之间有什么区别？提前致谢。最佳答案 block 大小和 block 大小相同。拆分大小可能与
javascript - 超过 localStorage 配额(localStorage 大小!= 文件下载大小)& 如何检查 localStorage 大小
我想不出一个好的标题，所以希望可以。我正在做的是创建一个离线 HTML5 webapp。 “出于某些原因”我不希望将某些文件放在缓存 list 中，而是希望将内容放在 localStorage 中。
xamarin - 减少 Xamarin.Forms 中的 APK 大小，APK 大小 80MB
无法将 xamarin apk 大小减少到 80 MB 以下，已执行以下操作: 启用混淆器配置:发布平台:事件(任何 CPU)。启用 Multi-Dex:true 启用开发人员检测(调试和分析)
python - 读取多个 csv 文件(大小 mxm)并加载为 n 维数组(大小 nxmxm)(不连接)
我正在开发一个程序，需要将大量 csv 文件(数千个)加载到数组中。 csv 文件的尺寸为 45x100，我想创建一个尺寸为 nx45x100 的 3-d 数组。目前，我使用 pd.read_csv(
react-native - Flutter apk/ipa 大小 vs React Native apk/ipa 大小
Hello World 示例的 React Native APK 大小约为 20M (in recent versions)，因为支持不同的硬件架构(ARMv7、ARMv8、X86 等)，而同一应用程
python - 将 n 个元素(大小 = 2 字节，十进制)的列表拆分为 2n 个元素(大小 = 1 字节，十六进制)
我有一个包含 n 个十进制元素的列表，其中每个元素都是两个字节长。可以说: x = [9000 , 5000 , 2000 , 400] 这个想法是将每个元素拆分为 MSB 和 LSB 并将其存储在
GtkTextView 大小
如何设置 GtKTextView 的大小？我想我不能使用 gtk_widget_set_usize。最佳答案您不能直接控制小部件的大小，而是由其容器完成。您可以使用 gtk_widget_set_
具有函数的结构的c++大小
这个问题在这里已经有了答案: c++ sizeof() of a class with functions (7 个答案) 关闭 5 年前。结果是 12。 foobar 函数存储在内存中的什么位置
image - 为什么图像序列比源视频大(大小)？
当我在 ffmpeg(或任何其他程序)中使用这样的命令时: ffmpeg -i input.mp4 image%d.jpg 所有图像的组合文件大小总是比视频本身大。我尝试减少每秒帧数、降低压缩设置、模
clojurescript 高级编译 - 大小
我是 clojurescript 的新手。高级编译后出现“77 KB”的javascript文件是否正常？我有一个 clojurescript 文件: 我正在使用 leinigen: lein c
Qt QPixmap 大小
我想要一个 QPixmap尺寸为 50 x 50。我试过 : QPixmap watermark(QSize(50,50)); watermark.load(":/icoMenu/preparati
卷积层的 tensorflow 大小
我正在尝试从一篇研究论文中重新创建一个 cnn，但我对深度学习还是个新手。我得到了一个大小为 32x32x7 的 3d 补丁。我首先想执行一个大小为 3x3 的卷积，具有 32 个特征和步幅为 2。
iPhone如何在旋转设备时正确调整 View 大小
我一直在尝试调整 View Controller 内的 View 大小，但到目前为止没有运气。基本上，我的 View 最底部有一个按钮，当方向从纵向更改为横向时，该按钮不再可见，因为它现在太靠下了。
javascript - 上传前检查图像尺寸/大小
如何使用此功能检查图像的尺寸？我只是想在上传之前检查一下... $("#LINK_UPLOAD_PHOTO").submit(function () { var form = $(this);
二叉搜索树上的 JavaScript 大小
我用 C++ 完成了这个，因为你可以通过引用传递参数。我无法弄清楚如何在 JavaScript 中执行此操作。我的代码需要更改什么？我的输出是1 this.sizeOfBst = function()

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 带有自定义标记和图标调整大小的 vue2-google-maps 出现问题，在缩小时放错了位置