Question

如何设置通过google maps api kmllayer函数调用的kml文件的infowindow宽度？

这是我的代码：

<!DOCTYPE html>
<html>
<head>

 <meta name="viewport" content="initial-scale=1.0">
 <meta charset="utf-8">

</head>
<body>
 <div id="mapindex"></div>
  <script>
     var map;

     function initMap() {

     map = new google.maps.Map(document.getElementById('mapindex'), {
      center: {
        lat: 54.5559,
        lng: 16.5984
      },
      zoom: 7,
      mapTypeId: 'hybrid'
     });

     var ctaLayer = new google.maps.KmlLayer({
      url: 'http://www.instead.com.pl/test.kml?time=' + new Date().getTime(),
      map: map,
      preserveViewport: true,
      });
      }
    </script>

     <script async defer
     src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>

 </html>

JSFiddle example

但我想设置infowindow的宽度或最大宽度，或者仅设置名称标签。

我真的已经阅读了我在互联网上找到的所有内容，但无法找到解决方案。甚至可以实现吗？

Answer 1

看起来这是（{3}}

中的（另一个）错误

experimental version

proof of concept fiddle (using v=3)

代码段

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-family: Ubuntu, Arial, sans-serif;
}

#mapindex {
  width: 100%;
  height: 100%;
  position: relative;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>

  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">

</head>

<body>
  <div id="mapindex"></div>
  <script>
    var map;

    function initMap() {

      map = new google.maps.Map(document.getElementById('mapindex'), {
        center: {
          lat: 54.5559,
          lng: 16.5984
        },
        zoom: 7,
        mapTypeId: 'hybrid'
      });
      var infowindow = new google.maps.InfoWindow();
      var ctaLayer = new google.maps.KmlLayer({
        url: 'http://www.instead.com.pl/test.kml?time=' + new Date().getTime(),
        map: map,
        preserveViewport: true,
      });
    }
  </script>

  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=3">
  </script>
</body>

</html>

＆＃13;

Answer 2

您可以取消单击KmlLayer时创建的标准InfoWindow，而是创建另一个具有maxWidth的InfoWindow。以下是对代码的修改：

Proof of concept JSBin

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0">
 <meta charset="utf-8">
 <style>
   html,
  body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-family: Ubuntu, Arial, sans-serif;
}

#mapindex {
  width: 100%;
  height: 100%;
  position: relative;
}
  </style>
</head>
<body>
 <div id="mapindex"></div>
  <script>
     var map;

     function initMap() {

       var map = new google.maps.Map(document.getElementById('mapindex'), {
        center: {
          lat: 54.5559,
          lng: 16.5984
        },
        zoom: 7,
        mapTypeId: 'hybrid'
       });

     var kmlLayer = new google.maps.KmlLayer({
      url: 'http://www.instead.com.pl/test.kml?time=' + new Date().getTime(),
      map: map,
      preserveViewport: true,
      suppressInfoWindows: true
      });

     var infoWindow = new google.maps.InfoWindow();

     kmlLayer.addListener('click', function(event) {
         var content = event.featureData.infoWindowHtml;
         infoWindow.setOptions({
             content: content,
             position: event.latLng,
             maxWidth: 200
         });

         infoWindow.open(map);
     });

    }
    </script>

     <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>

如何设置通过google maps api kmllayer调用的kml文件的infowindow的宽度？

2 个答案: