Google maps 如何设置将放置在标记底部的vue2谷歌地图的gmap信息窗口。?
我有一个带有两个信息窗口的标记,但它们位于标记上方。我想“oyeee”信息窗口必须在底部。这是我的代码:Google maps 如何设置将放置在标记底部的vue2谷歌地图的gmap信息窗口。?,google-maps,vuejs2,infowindow,vue2-google-maps,Google Maps,Vuejs2,Infowindow,Vue2 Google Maps,我有一个带有两个信息窗口的标记,但它们位于标记上方。我想“oyeee”信息窗口必须在底部。这是我的代码: <gmap-marker :position="toLocation" icon="http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"> <gmap-info-window :opened="true"
<gmap-marker :position="toLocation" icon="http://maps.google.com/mapfiles/ms/icons/yellow-dot.png">
<gmap-info-window :opened="true"
:options="{
pixelOffset: { width: 0, height: 0 },
content: `<b>Destination Address <br>
${toLocation.lat} , ${toLocation.lng}</b>`,
}"
></gmap-info-window>
<gmap-info-window :opened="true"
:options="{
pixelOffset: { width: 0, height: 0 },
content: `<b>OYEEEEEEEEEEEEEEEEEEEEEEEEEE </b>`,
}"
></gmap-info-window>
</gmap-marker
由于vue google maps
库支持信息窗口组件的pixelOffset
属性,因此信息窗口位置可以如下调整:
注意:为防止重叠,应使用高度偏移
超过信息窗口高度
{{location.name}
{{location.name}
结果
您可能想检查一下这个类似的问题:几乎类似,但我的问题是关于vue2谷歌地图节点包的gmap_info_window vue组件
<gmap-map :center="center" :zoom="zoom" ref="map">
<gmap-marker
:position="{ lat: location.lat, lng: location.lng }"
:clickable="true"
icon="http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
@click="openInfoWindow(location)"
/>
<gmap-info-window
:position="{ lat: location.lat, lng: location.lng }"
:options="{
pixelOffset: {
width: 0,
height: -25,
},
}"
:opened="infoBoxOpen"
@closeclick="infoBoxOpen = false"
>
<div class="infoWindow">
{{ location.name }}
</div>
</gmap-info-window>
<gmap-info-window
:position="{ lat: location.lat, lng: location.lng }"
:options="{
pixelOffset: {
width: 0,
height: -75,
},
}"
:opened="infoBoxOpen"
@closeclick="infoBoxOpen = false"
>
<div class="infoWindow">
{{ location.name }}
</div>
</gmap-info-window>
</gmap-map>