Question

好吧，这对我来说已经有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);

}

关闭时我做错了什么？

Answer 1

在你的addListener调用中

你有function（）而不是function（arguments）。我还会创建一个指向调用addlistener之外的infoWindow的变量。假设click事件将传递您期望的参数。它可能需要是函数（e，arguments）。

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

GoogleMaps addlistener zip弹出窗口？

3 个答案: