谷歌地圖api v3無法獲取信息框顯示在動態創建的多邊形

Question

沒關係，這是我有。我使用smarty來填充座標，從mysql中獲取，我的小應用程序在英國地圖上繪製了300多個多邊形，用於縣界。我已經設法做到了這一點，並按照我的意願着色。現在我有一個問題，我不能得到任何信息框顯示。

多一點信息，counties_zone的原因是，有些地區有島嶼打破了多邊形制造混亂。所以我必須將它們分區以正確地關閉多邊形。

我的smarty變量的其餘部分應該很自我解釋。

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

這就是結果。