GoogleMaps addlistener zip popup？

Question

好的，這對我來說已經有3天的問題了，JavaScript關閉並不是我的強項。

我有一個谷歌地圖，我已經應用了一系列可點擊的多邊形覆蓋。我想要一個特定的函數運行，取決於點擊的多邊形，我正在工作。問題是我無法弄清楚如何工作監聽器，以便顯示一個帶有該多邊形郵政編碼的infowindow的函數。這裏是代碼：

for (x = 0; x < 50 && coordsObject.length > x; x++) { //Only draw 50 polygons at a time 
    ... 
    //create zipcoords array 

    clickablePolygons.push(new google.maps.Polygon({ 
     paths: zipCoords 
     , strokeColor: "#000" 
     , strokeOpacity: 1 
     , strokeWeight: 1 
     , fillColor: convertRatingToHex(rating) 
     , fillOpacity: 0.45 
    })); 


    infoWindow.push(
     new google.maps.InfoWindow({ 
      content: '<div id="gcontent">' + zip.toString() + '</div>' 
     }) 
    ); 

    //problem child 
    var theFunction = function(arguments, infowindow, map) { 
     var marker = new google.maps.Marker({ 
      position: arguments[0].latLng 
     }); 

     infowindow.open(map, marker); 

    }; 

    google.maps.event.addListener(clickablePolygons[clickablePolygons.length - 1], 'click', function() { 
     theFunction(arguments, infoWindow[x], map); //:(
    }); 


    clickablePolygons[clickablePolygons.length - 1].setMap(map); 

} 

我在做什麼錯了關閉？

Answer 1

在你的addListener調用中你有函數（）而不是函數（參數）。我還會在調用addlistener之外創建一個指向infoWindow的變量。假設是click事件會傳入您期望的參數。它可能需要是函數（e，參數）。

var win = infoWindow[x]; 

google.maps.event.addListener(clickablePolygons[clickablePolygons.length - 1], 'click', function(arguments) { 
    theFunction(arguments, win, map); 
}); 

Answer 2

看起來像變量範圍的問題，不妨一試

(function(x){ 
    google.maps.event.addListener(clickablePolygons[clickablePolygons.length - 1], 'click', function(arg) { 
     theFunction(arg, infoWindow[x], map); 
    }); 
})(x); 

Answer 3

你並不需要一個InfoWindow的多個實例。只需使用methods即可在需要時設置內容和位置。

我不明白你爲什麼要添加一個標記，這是一個要求嗎？如果您只想在單擊多邊形時顯示InfoWindow，則可以使用從click事件傳遞的MouseEvent對象來獲取點擊的當前位置。

下面是一個例子：http://jsfiddle.net/bryan_weaver/akLBM/

代碼中的鏈接：

var map; 
var infoWindow; 
var clickablePolygons = []; 

function createPolygon(path, stateName) { 
    var poly = new google.maps.Polygon({ 
     paths: path, 
     strokeColor: "#000", 
     strokeOpacity: 1, 
     strokeWeight: 1, 
     fillColor: "#330000", 
     fillOpacity: 0.45 
    }); 

    //add the polygon to the array, to use later if needed. 
    clickablePolygons.push(poly); 

    //attach a click event, the first argument of the listener is the event 
    //you can get the position of the mouse cursor where the map 
    //was clicked through this. 
    google.maps.event.addListener(poly, "click", function (event) { 

     //call the setContent method and set the content for the info window 
     infoWindow.setContent("This state is: " + stateName); 
     //set the anchor of the info window, in this case 
     //I am using the mouse position at 
     //the time of the click 
     infoWindow.setPosition(event.latLng); 
     //open the info window, passing the map in which to attach it to. 
     infoWindow.open(map); 
    }); 

    //add the polygon to the map 
    poly.setMap(map); 
} 

function initialize() { 
    var myLatLng = 
     new google.maps.LatLng(39.983994270935625, -111.02783203125); 
    var mapOptions = { 
     zoom: 5, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    //polygon coords for Utah 
    var utah = [ 
    new google.maps.LatLng(41.983994270935625, -111.02783203125), 
    new google.maps.LatLng(42.00032514831621, -114.01611328125), 
    new google.maps.LatLng(36.96744946416931, -114.01611328125), 
    new google.maps.LatLng(37.00255267215955, -109.0283203125), 
    new google.maps.LatLng(40.97989806962013, -109.0283203125), 
    new google.maps.LatLng(41.0130657870063, -111.02783203125)]; 

    //polygon coords for Colorado 
    var colorado = [ 
    new google.maps.LatLng(40.96330795307351, -109.05029296875), 
    new google.maps.LatLng(36.96744946416931, -109.0283203125), 
    new google.maps.LatLng(37.02009820136811, -101.9970703125), 
    new google.maps.LatLng(40.97989806962013, -102.06298828125)]; 

    map = new google.maps.Map($('#map')[0], mapOptions); 
    //create a single info window for use in the application 
    infoWindow = new google.maps.InfoWindow(); 

    //add the polygon and infowindow content to the map. 
    createPolygon(utah, "Utah"); 
    createPolygon(colorado, "Colorado"); 
} 

google.maps.event.addDomListener(window, 'load', initialize);