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