从KML获取infowindow描述的问题

时间:2012-12-11 22:36:40

标签: google-maps-api-3 infowindow

谷歌mashup的新手。我在我们的网络服务器(http://www.madisonareampo.org/maps/BRT_National.kmz)上有一个KML,可以在谷歌地图上绘制。

我有一个Google Maps mashup,我希望infowindow通过点击事件显示KML描述字段的内容。使用ArcGIS从地理数据库导出KML文件。

单击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>

1 个答案:

答案 0 :(得分:2)

InfoWindows需要position属性,您必须调用open(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);
}