Question

我一直试图弄清楚这几个小时，但没有运气。希望somone可以给我一个解决方案。

我有几个多边形，我想在点击它们时从siteName显示它们的值。我没有收到错误，但我也没有显示信息窗口。

提前感谢您的帮助。

  <!DOCTYPE html>
 <html>
<head>
<p id="demo">coordinates</p>
</br>
<p id="coords">coordinates</p>
<style>
  html, body, #map_canvas { margin: 0; padding: 0; height: 100%; }
</style>
<script
  src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization,MVCObject">
</script>
<script>
    var map;

    function initialize() {
        var kansas_city = new google.maps.LatLng(39.00495613,-94.64780668);
        var mapOptions = {
        zoom: 10,
        center: kansas_city,
        mapTypeId: google.maps.MapTypeId.TERRAIN
        };

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    // Create a <script> tag and set the geoJSON file as the source.
    var script = document.createElement('script');
    // (In this example we use a locally stored copy instead.)
    script.src = 'sector.json';
    document.getElementsByTagName('head')[0].appendChild(script);
    }

    // Loop through the results array and place a marker for each
    // set of coordinates.
    var siteNames;
    window.sector_callback = function(results) { 
        for (var i = 0, len = results.features.length; i < len; i++) {
            var coords = results.features[i].geometry.coordinates[0];
            siteNames = results.features[i].properties.Name; // added for site names
            var path = [];

            for ( var j = 0, len2 = coords.length; j < len2; j++ ){ // pull out each set of coords and create a map object
                path.push(new google.maps.LatLng(coords[j][1], coords[j][0]));
            }

            var polygons = new google.maps.Polygon({
            path: path,
            map: map
            });

            var contentString = siteNames;
            var infowindow = new google.maps.InfoWindow({

            });                     


            google.maps.event.addListener(polygons, 'click', function() {
                infowindow.open(map,polygons);
                content: contentString
            });




            google.maps.event.addListener(polygons, 'mouseover', function() {
            var currentPolygon = this;

            currentPolygon.setOptions({ // setOptions is a method and properties below
                fillOpacity: 0.45,
                fillColor: "#FF0000",

                })
            });

            google.maps.event.addListener(polygons, 'mouseout', function() {
            var currentPolygon = this;
            currentPolygon.setOptions({ 
                fillOpacity: 0.35,
                fillColor: "#000000"
                })
            });             
        }
    }
 </script>
 </head>
 <body onload="initialize()">
  <div id="map_canvas"></div>
</body>

Answer 1

可能不是唯一的问题，但绝对是一个问题。文字content: contentString在不知名的地方闲逛;我想你想要这样：

var infowindow = new google.maps.InfoWindow({
    content: contentString
});                     

google.maps.event.addListener(polygons, 'click', function() {
    infowindow.open(map,polygons);
});

编辑

这是第二个问题：infowindow会在循环的每次迭代中被覆盖。需要进行调整：

google.maps.event.addListener(polygons, 'click', (function(infowindow) {
        return function() {
            infowindow.open(map,polygons);
            content: contentString
        }
    })(infowindow)
);

Answer 2

将infowindow内容与多边形相关联的一种方法是使用function closure。如果您没有使用标记，您还需要设置信息窗口显示的位置，唯一允许的锚点（至少当前）是标记。

一个可能的“createClickablePoly”函数：

function createClickablePoly(poly, html) {
        google.maps.event.addListener(poly, 'click', function(evt) {
            infowindow.setContent(html);
            infowindow.setPosition(evt.latLng);
            infowindow.open(map);
        });
}

Example using function closure

infowindow不工作

2 个答案: