0

別の閉鎖の問題を開く薄い氷の上を踏んでいることに気付きましたが、検索しても問題に対する答えが見つかりません。1 つのコード ブロックから 2 つのマップを生成する Google Maps API v3 ページがあります。ユーザーの現在の位置を中心とした小さなマップと、ユーザーの位置が中央かどうかでマークされたエリア全体を示す大きなマップです。マップの上には、14 個の長方形で構成される長方形レイヤーがあります。2 つのマップを生成するために、四角形を 2 次元配列に配置する必要がありました。「map」の場合は四角形 [1]、「map2」の場合は四角形 [2] です。

var rectangles = [0,1,2,3,4,5,6,7,8,9,10,11,12,13];

rectangles[1][0]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a, b), new google.maps.LatLng(x, y)),
map:map,
fillColor:'red',
fillOpacity: 0.3,
strokeOpacity: 0,
url: 'http://example.com',
clickable: true
});

rectangles[2][0]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a, b), new google.maps.LatLng(x, y)),
map:map2,
fillColor:'red',
fillOpacity: 0.3,
strokeOpacity: 0,
url: 'http://example.com',
clickable: true
});

...等々。すべて正常に機能し、2 つのマップが表示され、ジオロケーションが機能します。各長方形にクリックリスナーを追加したいのですが、配列を参照する人がわかりません。これは私が今持っているものです：

for ( i = 0; i < rectangles[1].length; i++ ){
google.maps.event.addListener(rectangles[1][i], 'click', function() {
window.location.href = this.url;
});
}
for ( x = 0; x < rectangles[2].length; x++ ){
google.maps.event.addListener(rectangles[2][x], 'click', function() {
window.location.href = this.url;
});
}

これは明らかに機能しません。クロージャーの問題に対するさまざまな解決策を見てきましたが、2 つの四角形の配列を参照する際に正しい方向に進んでいるかどうか、または 2 つの異なるクリック リスナーのセットを定義する必要があるかどうかさえわかりません。誰かが私を正しい方向に向けることができれば本当に感謝しています. 追いつくために懸命に努力している新しい学習者が常にやって来ます。

ありがとう。

4

1 に答える 1

0 
//First, set up `rectangles` as an array containing two arrays.
var rectangles = [];
rectangles[0] = [];
rectangles[1] = [];

//As `google.maps.Rectangle` doesn't accept a `url` option, 
//its url needs to be defined separately from the rectangle itself,
//but in such a way that the two are associated with each other.
//For this we can use a javascript plain object. 
rectangles[0][0] = {
    rect: new google.maps.Rectangle({
        bounds: new google.maps.LatLngBounds(new google.maps.LatLng(a, b), new google.maps.LatLng(x, y)),
        map: map,
        fillColor: 'red',
        fillOpacity: 0.3,
        strokeOpacity: 0,
        clickable: true
    }),
    url: 'http://example.com'
};
rectangles[1][0] = new google.maps.Rectangle({
    ...
});
rectangles[0][1] = new google.maps.Rectangle({
    ...
});
rectangles[1][1] = new google.maps.Rectangle({
    ...
});
rectangles[0][2] = new google.maps.Rectangle({
    ...
});
rectangles[1][2] = new google.maps.Rectangle({
    ...
});

//Now to attach the click listeners.

//First we define a function that adds a click listener.
//By doing this in its own function, a closure is formed,
//trapping the formal variable `rectObj` and making `rectObj.url` 
//accessible to the listener when it is called in response to future clicks.
function addClickListener(rectObj) {
    google.maps.event.addListener(rectObj.rect, 'click', function() {
        window.location.href = rectObj.url;
    });
}

//Now, we can loop through the `rectangles` arrays, adding listeners.
for ( i = 0; i < 2; i++ ) {
    for ( j = 0; j < 14; j++ ) {
        if(rectangles[i][j]) {//safety
            addClickListener(rectangles[i][j]);
        }
    }
}
于 2012-12-19T13:07:13.043 に答える