使用 vue2-google-maps 时，如何为 google 地图使用 html 填充信息 window？

Question

我想在使用 vue2-google-maps 时为 Google 地图制作自定义信息 Window。但到目前为止，据我所知，我们只能向信息 window 添加文本。有什么方法可以用我的自定义 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>'
      }
    };
}

使用 vue2-google-maps 时，如何为 google 地图使用 html 填充信息 window？

How to populate info window with html for google maps when using vue2-google-maps?

google-maps

vuejs2

vue2-google-maps