gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 16:16:55 25 4
gpt4 key购买 nike

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com