google-maps - 使用 vue2-google-maps 时如何使用 html 填充谷歌地图的信息窗口？

Question

我想在使用 vue2-google-maps 时为谷歌地图制作一个自定义信息窗口。但到目前为止，据我所知，我们只能将文本添加到信息窗口。有没有办法用我的自定义 HTML 来自定义它，如下所示。



我希望使用 vue2-google-maps 来完成这项工作。

谢谢。

Answer 1

我们可以通过在 infoOptions 属性中发送“content”参数来实现这一点。

             <gmap-map
                :center="center"
                :zoom="13"
                :options="mapStyle"
                ref="map"
                style="width: 100%; height: 100%"
                >
                <gmap-info-window
                :options="infoOptions"
                :position="infoPosition"
                :opened="infoOpened"
                :content="infoContent"
                @closeclick="infoOpened=false">

                </gmap-info-window>
                <gmap-marker v-if="mapLoaded"
                :key="index"
                v-for="(m, index) in markers"
                :position="m.position"
                :clickable="true"
                @click="toggleInfo(m, index)"
                ></gmap-marker>
            </gmap-map>

在数据中

    data() {
    return {
      map: null,
      mapLoaded: false,
      center: { lat: 22.449769, lng: .3902178 },

      markers: [
        {
          position: {
            lat: 22.449769,
            lng: .3902178
          }
        }
      ],
      infoPosition: null,
      infoContent: null,
      infoOpened: false,
      infoCurrentKey: null,
      infoOptions: {
        pixelOffset: {
          width: 0,
          height: -35
        },
        content:
          '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>'
      }
    };
}