Javascript 信息窗口不工作_Javascript_Google Maps Api 3_Click_Geojson

Javascript 信息窗口不工作

javascript google-maps-api-3

Javascript 信息窗口不工作,javascript,google-maps-api-3,click,geojson,Javascript,Google Maps Api 3,Click,Geojson,我花了几个小时试图弄明白这一点，但没有运气。希望有人能给我一个解决办法我有几个多边形，我想在单击它们时从siteName显示它们的值。我没有得到一个错误，但我也没有得到信息窗口显示提前感谢您的帮助 <!DOCTYPE html> <html> <head> coordinates coordinates &l

我花了几个小时试图弄明白这一点，但没有运气。希望有人能给我一个解决办法

我有几个多边形，我想在单击它们时从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>


坐标


坐标
html，body，#map_canvas{margin:0；padding:0；height:100%；}
var映射；
函数初始化（）{
var kansas_city=new google.maps.LatLng（39.00495613，-94.64780668）；
变量映射选项={
缩放：10，
中心：堪萨斯城，
mapTypeId:google.maps.mapTypeId.TERRAIN
};
map=new google.maps.map（document.getElementById（'map_canvas'），mapOptions）；
//创建一个标记并将geoJSON文件设置为源。
var script=document.createElement（'script'）；
//（在本例中，我们使用本地存储的副本。）
script.src='sector.json'；
document.getElementsByTagName（'head'）[0].appendChild（脚本）；
}
//循环遍历结果数组，并为每个结果放置一个标记
//一组坐标。
var站点名称；
window.sector_callback=函数（结果）{
对于（变量i=0，len=results.features.length；i


可能不是唯一的问题，但肯定是一个问题。文本<代码>内容：内容字符串在无处的中间挂出；我想你想要这样：
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)
);

将infowindow内容与多边形关联的一种方法是使用。您还需要设置infowindow的显示位置，如果您没有将其与标记一起使用，则唯一允许的锚点（至少当前）是标记
一个可能的“createClickablePoly”函数：
function createClickablePoly(poly, html) {
        google.maps.event.addListener(poly, 'click', function(evt) {
            infowindow.setContent(html);
            infowindow.setPosition(evt.latLng);
            infowindow.open(map);
        });
}