google-maps-api-3 - 从 KML 获取信息窗口描述时出现问题

标签 google-maps-api-3 infowindow

Google 混搭有点新鲜。我的网络服务器 (http://www.madisonareampo.org/maps/BRT_National.kmz) 上有一个 KML,可以在 Google map 上绘制。

我有一个 Google map 混搭,我希望信息窗口通过单击事件显示 KML 描述字段的内容。 KML 文件是使用 ArcGIS 从地理数据库导出的。

当我单击 KML 文件中的标记时,没有返回任何内容。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Street View Layer</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvkXCNOcIGLKZVgFtIykSQEbEk0db1XxY&sensor=false">
    </script>
    <script>

      function initialize() {
        var BRT = new google.maps.LatLng(40.380028, -93.440917);
        var mapOptions = {
          center: BRT,
          zoom: 3,
          overviewMapControl: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(
            document.getElementById('map_canvas'), mapOptions);

        var layer= new google.maps.KmlLayer('http://www.madisonareampo.org/maps/BRT_National.kmz',
          { suppressInfoWindows: true,
            map: map });

        google.maps.event.addListener(layer, 'click', function(kmlEvent) {
          showInContentWindow(kmlEvent.featureData.description);
        });

        function showInContentWindow(text) {
          var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text +  "</div>";
          var infowindow = new google.maps.InfoWindow({
            content: content 
          })
        }

        var panoramaOptions = {
          position: BRT,
          pov: {
            heading: 34,
            pitch: 10,
            zoom: 1
          }
        };
        var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
        map.setStreetView(panorama);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width: 650px; height: 400px"></div>
    <div id="pano" style="position:absolute; left:660px; top: 8px; width: 650px; height: 400px;"></div>
  </body>
</html>

最佳答案

InfoWindows需要一个 position 属性,并且您必须调用 open(map) 将其绑定(bind)到 map 。这是代码的工作版本:

google.maps.event.addListener(layer, 'click', function(kmlEvent) {
  showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
});

function showInContentWindow(position, text) {
  var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text +  "</div>";
  var infowindow = new google.maps.InfoWindow({
    content: content, 
    position: position
  })
  infowindow.open(map);
}

关于google-maps-api-3 - 从 KML 获取信息窗口描述时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13829671/

相关文章:

javascript - 自定义 gmap 样式的地形选项?

javascript - 如何在 JS 中的 Google map 上的标记上方添加文本?

javascript - 如何拥有多色折线谷歌地图

php - 我的 Google map InfoWindow 内的超链接未正确显示

javascript - 谷歌地图,加载点上的纬度/经度

javascript - 拖动后 Google map 多段线无法正确显示

jquery - 我为最近失去的功能开发的 map

google-maps - Google Maps V3 的多段折线和信息窗口

google-maps-api-3 - 在 Google map 上获取所有信息 Windows

google-maps - 即使设置正确,Google map InfoWindow 宽度也会被覆盖