如何基于KML文件标记在Google Maps上创建锚定式InfoWindow？

谷歌官方提供的KML示例代码是将InfoWindow内容渲染到地图旁的#capture div中，但我们需要改为点击KML标记时，在标记上方弹出原生的Google Maps InfoWindow，而非使用外部div。

原官方示例代码（问题版本） #

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

期望效果参考代码（原生锚定InfoWindow） #

contentString='html here';

  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });

修改后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Popup InfoWindow Sample</title>
    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #map {
        height: 100%;
        width: 100%;
        border: thin solid #333;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
      // 全局InfoWindow实例，避免重复创建
      var infowindow = new google.maps.InfoWindow();

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        
        kmlLayer.addListener('click', function(event) {
          // 从KML点击事件中获取InfoWindow内容
          var content = event.featureData.infoWindowHtml;
          // 设置InfoWindow的内容和位置
          infowindow.setContent(content);
          // 将InfoWindow锚定到点击的标记坐标（KML标记无法直接作为anchor，用position替代）
          infowindow.setPosition(event.latLng);
          // 在地图上打开InfoWindow
          infowindow.open(map);
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

修改说明 #

1. 移除了不必要的#capture div及对应的CSS样式，让地图占满整个页面
2. 创建全局的infowindow实例，避免每次点击都重复创建新的InfoWindow
3. 在KML图层的click事件中：
   • 从event.featureData.infoWindowHtml获取KML中定义的InfoWindow内容
   • 通过setPosition()将InfoWindow定位到点击的标记坐标（event.latLng）
   • 调用open(map)在地图上弹出InfoWindow，实现锚定在标记上方的效果

内容的提问来源于stack exchange，提问作者Myuser03