google 地图 api v3 无法让信息框显示在动态创建的多边形上

Question

好的，这就是我所拥有的。我正在使用 smarty 填充坐标，从 mysql 中提取，我的小应用程序在英国地图上绘制了 300 多个多边形作为县界。我设法做到了这一点，并且还根据需要为它们着色。现在我有一个问题，我无法显示任何信息框。

更多信息，counties_zone 的原因是某些区域有岛屿，这些岛屿打破了多边形，造成混乱。所以我不得不对它们进行分区以正确关闭多边形。

我其余的聪明变量应该很容易解释。

<script>
var map;
var infoWindow;

function initialize() {
    var mapOptions={
        zoom: 6,
        center: new google.maps.LatLng(54.049976288319, - 2.8110410026615),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

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

    var counties={
    };
{foreach $counties as $county => $area}
    {foreach $area as $zone => $coords}
    counties["{$county}_{$zone}"]=new google.maps.Polygon({
        paths: [
        {foreach $coords as $coord}
                new google.maps.LatLng({$coord.0}, {$coord.1}),
        {/foreach}
        ],
        strokeColor: "#0000ff",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#{$coord.2}",
        fillOpacity: 0.6
    });
    counties["{$county}_{$zone}"].setMap(map);

    infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(counties["{$county}_{$zone}"], 'click', showInfoCounty);

    {/foreach}
{/foreach}

}

function showInfoCounty(event) {
    var contentString="<b>County</b><br />";
    contentString+="County name";

    // thhis works.
    console.log(contentString);

    // this works
    this.setOptions({ fillColor: "#000000" });

    // this doesnt work.

    // Replace our Info Window's content and position
    infowindow.setContent(contentString);
    infowindow.setPosition(event.latLng);
    infowindow.open(map);
}


google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

map 变量在 showInfoCounty 例程中未定义。使其成为全局的（它当前是初始化函数的本地版本，或者至少你初始化的它的版本是全局的，但它没有被初始化）。

显示问题的最小、完整、测试和可读示例：fiddle

变化：

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

收件人：

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

working fiddle

Answer 2

好的，这是我的最终解决方案。我已经接受了你关于作用域的注释并删除了额外的函数，因此全局作用域不再是一个问题。

/**
This code snippet accepts an array as follows for each polygon.
Colour should really be moved up a county level.

county_1 [0]

        Zone [0]

            Points [0] [ lat, lng, colour ] (colour code without the prepended #
            Points [1] [ lat, lng, colour ]
            Points [2] [ lat, lng, colour ]

county_1 [0]

        Zone [0]

            Point [0] [ lat, lng, colour ]
            Point [1] [ lat, lng, colour ]
            Point [2] [ lat, lng, colour ]
etc...
etc...

**/

// Removed global vars.
function initialize() {
    var mapOptions={
        zoom: 6,
        center: { lat:54.049976288319, lng:-2.8110410026615 },
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    // brought map back into local scope.
    var map=new google.maps.Map(document.getElementById('googleMap'),
            mapOptions);

    // Initialise counties for populating the polygons.
    var counties={
    };

// I use smarty so thats why the odd looking loop,
// you will likely need to modify this and the
// associated ($vars} to your own needs.
{foreach $counties as $county => $area}
    {foreach $area as $zone => $coords}
    counties["{$county}_{$zone}"]=new google.maps.Polygon({
        paths: [
        {foreach $coords as $coord}
                new google.maps.LatLng({$coord.0}, {$coord.1}),
        {/foreach}
        ],
        strokeColor: "#0000ff",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#{$coord.2}",
        fillOpacity: 0.6
    });

    // polygon assign to map
    counties["{$county}_{$zone}"].setMap(map);

    // set your info window information to collect later.
    counties["{$county}_{$zone}"].set("Info", '{$county}');    

    // add a listner for the click.
    google.maps.event.addListener(counties["{$county}_{$zone}"], 'click', function(event) {

        // create the new info window.
        var infoWindow = new google.maps.InfoWindow();

        // get the previously set data and set it into the new info window.
        infoWindow.setContent( counties["{$county}_{$zone}"].get("Info") );

        // open the info window.
        infoWindow.open(map);

        // position the window, open at the click position with event.latLng
        infoWindow.setPosition(event.latLng);
    });

    {/foreach}
{/foreach}

}

// generate the map.
google.maps.event.addDomListener(window, 'load', initialize);

这是结果。

google 地图 api v3 无法让信息框显示在动态创建的多边形上

google maps api v3 cannot get info boxes to show on dynamically created polygons

polygons

google-maps-api-3