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

Question

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

<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

输出：

任何人都可以帮助我“oyeeeeee”信息 window 必须在标记的底部吗？

Answer 1

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

Note: to prevent overlapping, height offset should exceed info window height

<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>

结果

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

How to set gmap-info-window of vue2-google-map that will place in the bottom of the marker.?

google-maps

vuejs2

infowindow

vue2-google-maps