为每个多边形打开谷歌地图信息窗口V3(Open InfoWindow for each polygo

希望有人能帮助我这个问题。 我想就点击我的用户创建的每个多边形打开信息窗口。 我使用相同的代码标记，并且效果很好，但我不能让它为每个多边形工作。

如何解决这个问题有什么想法？

谢谢。

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

var infowindow = new google.maps.InfoWindow({
    content: 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;?>

Answer 1:

您不能使用相同形式的InfoWindow.open你使用的标记（没有标记来传递）的多边形。

从文档

开放 （图：？？图| StreetViewPanorama的，主播：MVCObject）

返回值：无

打开指定的地图上此信息窗口，。 任选地，信息窗口可以与锚相关联。 在核心API，唯一的锚是标记类。 然而，锚定可以是公开一个经纬度位置属性和任选的点anchorPoint属性用于计算pixelOffset，用于（参见InfoWindowOptions）任何MVCObject。 该anchorPoint是从锚的位置信息窗口的前端的偏移。）

你需要用专门设置InfoWindow.setPosition你想让它，当你调用open方法（点击的经纬度信息通常是一个不错的选择）空旷的地方（）。

例

代码片段：

 var infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150, 50) }); function initialize() { var geolib = google.maps.geometry.spherical; var myOptions = { zoom: 20, center: new google.maps.LatLng(32.738158, -117.14874), mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); bounds = new google.maps.LatLngBounds(); var polygon1 = new google.maps.Polygon({ map: map, path: [geolib.computeOffset(new google.maps.LatLng(32.737355, -117.148719), 100, 0), geolib.computeOffset(new google.maps.LatLng(32.737355, -117.148719), 100, 120), geolib.computeOffset(new google.maps.LatLng(32.737355, -117.148719), 100, -120) ], name: "polygon1" }); google.maps.event.addListener(polygon1, 'click', function(event) { var contentString = "name:" + this.name + "<br>" + event.latLng.toUrlValue(6); infowindow.setContent(contentString); infowindow.setPosition(event.latLng); infowindow.open(map); }); for (var i = 0; i < polygon1.getPath().getLength(); i++) { bounds.extend(polygon1.getPath().getAt(i)); } var polygon2 = new google.maps.Polygon({ map: map, path: [geolib.computeOffset(new google.maps.LatLng(32.739341, -117.148912), 90, 180), geolib.computeOffset(new google.maps.LatLng(32.739341, -117.148912), 90, 60), geolib.computeOffset(new google.maps.LatLng(32.739341, -117.148912), 90, -60) ], name: "polygon2" }); google.maps.event.addListener(polygon2, 'click', function(event) { var contentString = "name:" + this.name + "<br>" + event.latLng.toUrlValue(6); infowindow.setContent(contentString); infowindow.setPosition(event.latLng); infowindow.open(map); }); for (var i = 0; i < polygon2.getPath().getLength(); i++) { bounds.extend(polygon2.getPath().getAt(i)); } map.fitBounds(bounds); } google.maps.event.addDomListener(window, 'load', initialize); function createClickablePoly(poly, html, label, point) { gpolys.push(poly); if (!point && poly.getPath && poly.getPath().getLength && (poly.getPath().getLength > 0) && poly.getPath().getAt(0)) { point = poly.getPath().getAt(0); } var poly_num = gpolys.length - 1; if (!html) { html = ""; } else { html += "<br>"; } var length = poly.Distance(); if (length > 1000) { html += "length=" + poly.Distance().toFixed(3) / 1000 + " km"; } else { html += "length=" + poly.Distance().toFixed(3) + " meters"; } for (var i = 0; i < poly.getPath().getLength(); i++) { html += "<br>poly[" + poly_num + "][" + i + "]=" + poly.getPath().getAt(i); } html += "<br>Area: " + poly.Area() + " sq meters"; // 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', function(event) { infowindow.setContent(contentString); if (event) { point = event.latLng; } infowindow.setPosition(point); infowindow.open(map); // map.openInfoWindowHtml(point,html); }); if (!label) { label = "polyline #" + poly_num; } label = "<a href='javascript:google.maps.event.trigger(gpolys[" + poly_num + "],\"click\");'>" + label + "</a>"; // add a line to the sidebar html // side_bar_html += '<input type="checkbox" id="poly'+poly_num+'" checked="checked" onclick="togglePoly('+poly_num+');">' + label + '<br />'; } 

 body, html { height: 100%; width: 100%; } 

 <script src="http://maps.google.com/maps/api/js?libraries=geometry"></script> <table border="1" style="height:100%; width:100%"> <tr> <td> <div id="map_canvas" style="width:100%; height:100%"></div> </td> <td width="200"> <div id="report"></div> </td> </tr> </table> 

Answer 2:

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

文章来源: Open InfoWindow for each polygon google maps V3