Google maps api 3 打开每个多边形的信息窗口google maps V3

希望有人能帮我解决这个问题。 我正在尝试为我的用户创建的每个多边形打开一个单击信息窗口。 我对标记使用了相同的代码，效果很好，但我无法使它对每个多边形都有效

你对如何解决这个问题有什么想法吗

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2>Test</h2>'+
    '</div>';

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

var contentString=''+
''+
''+
“测试”+
'';
var infowindow=new google.maps.infowindow({
内容：contentString
});

//显示区域

<?php foreach ($field->result() as $f):?>

// Create an array with the coordanates of each area

var field<?=$f->id?>Coords = [
    <?php $latlng=$this->resources_data->field_latlng($f->id);?>
    <?php foreach ($latlng->result() as $point):?>
    new google.maps.LatLng(<?=$point->lat?>, <?=$point->lng?>),
    <?php endforeach;?>
];

// Create a polygon with the points of the area

var area<?=$f->id?>=new google.maps.Polygon({
    paths: area<?=$f->id?>Coords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
});

// Add the area to the map.

area<?=$f->id?>.setMap(map);

google.maps.event.addListener(area<?=$f->id?>,'click',function(){
    infowindow.open(map,area<?=$f->id?>)
});

<?php endforeach;?>

//用每个区域的坐标创建一个数组
变量fieldCoords=[
新google.maps.LatLng（，）,，
];
//使用区域的点创建多边形
var area=new google.maps.Polygon({
路径：区域坐标，
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
不透明度：0.35
});
//将该区域添加到地图中。
区域。设置地图（map）；
google.maps.event.addListener（区域，'click'，函数（）{
信息窗口。打开（地图、区域）
});

多边形的形式不能与标记的形式相同（没有要传递的标记）

从

打开（地图？：地图|街景全景，锚？：MVCObject）

返回值：无

在给定地图上打开此信息窗口。或者，信息窗口可以与锚关联在core API中，唯一的锚点是Marker类。但是，锚点可以是任何显示LatLng position属性的MVCObject，也可以是用于计算像素偏移的Point anchorPoint属性（请参见InfoWindowOptions）。锚点是从锚点位置到信息窗口顶端的偏移。）

使用InfoWindow.setPosition（）调用open方法时，需要专门设置要打开的位置（单击的latlng通常是一个不错的选择）

代码片段：

var infowindow=new google.maps.infowindow({
尺寸：新谷歌。地图。尺寸（150，50）
});
函数初始化（）{
var geolib=google.maps.geometry.spherical；
变量myOptions={
缩放：20，
中心：新google.maps.LatLng（32.738158，-117.14874），
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单
},
导航控制：对，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
bounds=新的google.maps.LatLngBounds（）；
var polygon1=新的google.maps.Polygon({
地图：地图，
路径：[geolib.computeOffset（新的google.maps.LatLng（32.737355，-117.148719），100,0），
geolib.computeOffset（新的google.maps.LatLng（32.737355，-117.148719），100120），
geolib.computeOffset（新的google.maps.LatLng（32.737355，-117.148719），100，-120）
],
名称：“polygon1”
});
google.maps.event.addListener（polygon1，'click'，函数（事件）{
var contentString=“name:”+this.name+“
”+event.latLng.toulvalue（6）；
setContent（contentString）；
infowindow.setPosition（event.latLng）；
打开（地图）；
});
对于（var i=0；i”+event.latLng.toulvalue（6）；
setContent（contentString）；
infowindow.setPosition（event.latLng）；
打开（地图）；
});
对于（var i=0；i0）和&poly.getPath（）.getAt（0））{
点=poly.getPath（）.getAt（0）；
}
var poly_num=gpolys.length-1；
如果（！html）{
html=“”；
}否则{
html+=“
”；
}
变量长度=多边形距离（）；
如果（长度>1000）{
html+=“长度=”+poly.Distance（）.toFixed（3）/1000+“公里”；
}否则{
html++=“长度=”+poly.Distance（）.toFixed（3）+“米”；
}
对于（var i=0；ipoly[“+poly_num+”][“+i+”]=“+poly.getPath（）.getAt（i）；
}
html+=“
面积：”+poly.Area（）+“平方米”；
//html++=poly.getLength（）.toFixed（2）+“m；”“+（poly.getLength（）*3.2808399）.toFixed（2）+“ft；”；
//html++=（poly.getLength（）*0.000621371192）.toFixed（2）+“miles”；
var contentString=html；
google.maps.event.addListener（poly，'click'，函数（event）{
setContent（contentString）；
如果（事件）{
点=event.latLng；
}
信息窗口。设置位置（点）；
打开（地图）；
//openInfoWindowHtml（point，html）；
});
如果（！标签）{
label=“polyline#”+poly_num；
}
标签=”；
//在侧栏html中添加一行
//侧栏html+=''+标签+'
；
}

body，
html{
身高：100%；
宽度：100%；
}

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
中心：{纬度：45.15492713361847，液化天然气：15.40557861328125}
});
var polygons=[{name:'first name'，坐标：[{lat:45.15492713361847，lng:15.40557861328125}，{lat:45.07933920973809，lng:15.5291748046875}，{lat:45.0191850743175，lng:15.43304443359
<script>

function initMap() {
         var map = new google.maps.Map(document.getElementById('map'), {
             zoom: 12,
             center: {lat: 45.15492713361847, lng: 15.40557861328125}
         });

         var polygons = [{name: 'first name', coordinates:[{lat:45.15492713361847,lng:15.40557861328125},{lat:45.07933920973809,lng:15.5291748046875},{lat:45.01918507438175,lng:15.43304443359375},{lat:45.07933920973809,lng:15.3204345703125}]}];

            // foreach your polygons
            for (var i = 0; i < polygons.length; i++) {
                var item = polygons[i];

                var coors = item["coordinates"];
                var name = item["name"];


                var Polygon = new google.maps.Polygon({
                    path: coors,
                    strokeColor: '#66b3ff',
                    strokeOpacity: 0.8,
                    strokeWeight: 5,
                    editable: false,
                    fillColor: 'blue',
                    fillOpacity: 0.5,
                });
                Polygon.setMap(map);

                // call function to set window
                attachPolygonInfoWindow(Polygon, coors, name);
            }
        }

        function attachPolygonInfoWindow(polygon, coors, html)
        {

            polygon.infoWindow = new google.maps.InfoWindow({
                content: html
            });

            polygon.infoWindow.setPosition(getHighestWindowPosition(coors));

            google.maps.event.addListener(polygon, 'mouseover', function () {
                polygon.infoWindow.open(map, polygon);
            });
            google.maps.event.addListener(polygon, 'mouseout', function () {
                polygon.infoWindow.close();
            });
        }

        // function to get highest position of polygon to show window nice on top 
        function getHighestWindowPosition(coors) {

            var lat = -5000, lng = 0, i = 0, n = coors.length;

            for (; i !== n; ++i) {
                if (coors[i].lat > lat) {
                    lat = coors[i].lat;
                    lng = coors[i].lng;
                }
            }
            return  {lat: lat, lng: lng};

        }

</script>