0

好吧，这对我来说已经是 3 天的问题了，javascript 闭包并不是我的强项。

我有一个谷歌地图，我在上面应用了一系列可点击的多边形。我希望根据单击的多边形运行特定的功能，我正在工作。问题是我无法弄清楚如何使用侦听器，以便显示一个包含该多边形邮政编码的信息窗口的函数。这是代码：

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

}

我在关闭时做错了什么？

4

3 回答 3

1

在您的 addListener 调用中，您有函数（）而不是函数（参数）。我还将创建一个指向 addlistener 调用之外的 infoWindow 的变量。假设是单击事件将传递您期望的参数。它可能需要是函数（例如，参数）。

var win = infoWindow[x];

google.maps.event.addListener(clickablePolygons[clickablePolygons.length - 1], 'click', function(arguments) {
     theFunction(arguments, win, map);
});
于 2013-04-22T15:42:24.627 回答
1

看起来像变量范围问题，试一试

(function(x){
    google.maps.event.addListener(clickablePolygons[clickablePolygons.length - 1], 'click', function(arg) {
        theFunction(arg, infoWindow[x], map);
    });
})(x);
于 2013-04-22T19:25:45.223 回答
0

您不需要InfoWindow. 只需在需要时使用方法设置内容和位置。

我不明白您为什么要添加标记，这是要求吗？如果您只想InfoWindow显示单击多边形的时间，则可以使用从单击事件传递的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);
于 2013-04-22T20:52:13.383 回答