0

わかりました、これは私にとって 3 日間の問題でした。javascript クロージャーは私の得意分野ではありません。

一連のクリック可能なポリゴンでオーバーレイを適用した Google マップがあります。クリックしたポリゴンに応じて特定の機能を実行したいのですが、これは機能しています。問題は、そのポリゴンの郵便番号を含む情報ウィンドウを表示する関数がリスナーを操作する方法を理解できないことです。コードは次のとおりです。

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 を指す変数を作成します。想定されるのは、クリック イベントが期待どおりの引数を渡すことです。function(e,arguments) である必要があるかもしれません。

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 に答える
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 に答える