如何设置将放置在标记底部的 vue2-google-map 的 gmap-info-window

问题描述

我有一个带有两个信息窗口的标记，但它们位于标记上方。我想“oyeee”信息窗口必须在底部。这是我的代码：

<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,content: `<b>OYEEEEEEEEEEEEEEEEEEEEEEEEEE </b>`,}"
        ></gmap-info-window>

</gmap-marker

输出：

任何人都可以帮助我如何必须“oyeeeee”信息窗口必须在标记的底部？

解决方法

由于 vue-google-maps 库支持信息窗口组件的 pixelOffset 属性，信息窗口位置可以这样调整：

注意：为了防止重叠，高度偏移应该 超出信息窗口高度

<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,height: -75,}"
        :opened="infoBoxOpen"
        @closeclick="infoBoxOpen = false"
      >
        <div class="infoWindow">
          {{ location.name }}
        </div>
      </gmap-info-window>
</gmap-map>

结果