1

Google Maps API と赤い点のアイコン (別名地震アイコン) を使用してマップを作成しようとしています。

いくつかの場所といくつかのマグニチュードがあります。マグニチュードの一部はより低く、あまり目立たないため、赤い点のアイコンは一部の場所にのみ適用されます。

var marker1;
var marker2
for (var i = 0; i < locations.length; i++) {

    if (locations[i][3] > 5){
        alert("I am in");}  
        marker1 = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: getCircle(locations[i][3])
        }); 
    if(locations[i][3] < 5){
        marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            animation: google.maps.Animation.BOUNCE
        });
    }
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker1);
    }
  })(marker1, i)); 
}

問題はmarker1にあります。マグニチュードが 5 を超える場所にマーカーを制限しようとすると、単一のアイコンが設計されず、アラートもトリガーされないためです。

しかし、（例のように）「if」ステートメント内からmarker1のコードを削除すると、アラートがトリガーされ、アイコンがマップに表示されます。

マーカー 2 は問題なくフィルタリングできます。

なぜこれがこのように機能するのですか？「}」を数行下に移動するだけです。私は理解できない。

助けてくれてありがとう！

4

1 に答える 1

1

そのコードは非常に複雑で、2 つのグローバル変数marker1とmarker2変数を使用する方法では、やりたいことが何もできない可能性があります。

コードで何をしたいのか完全にはわかりませんが、正しい方向への一歩となる可能性のある、よりクリーンなコーディング方法をお見せできますか?

for( var i = 0;  i < locations.length;  i++ ) {
    addMarker( locations[i] );
}

function addMarker( location ) {
    var lat = location[1], lng = location[2],
        magnitude = location[3], content = location[0];

    var options = {
        position: new google.maps.LatLng( lat, lng ),
        map: map
    };

    if( magnitude > 5 ) {
        options.icon = getCircle( magnitude );
    }
    else {
        options.animation = google.maps.Animation.BOUNCE;
    }

    var marker = new google.maps.Marker( options );

    google.maps.event.addListener( marker, 'click', function() {
        infowindow.setContent( content );
        infowindow.open( map, marker );
    });
}

注目すべき相違点:

  • グローバル変数marker1とmarker2変数はありません。代わりに、すべてのマーカーには独自のmarker変数があります。
  • メソッドを単純に呼び出すaddMarker()だけで、関数を返す複雑な関数ではなく、必要なクロージャが作成されます。
  • これらすべてのlocations[i][n]プロパティに名前付き変数を使用して、読みやすくします。
  • マグニチュードが正確に 5 の場合を処理しますが、これは元のコードではスキップされます。(必要に応じて、テストを から に変更し> 5ます>= 5。)
  • google.maps.Marker()少しの繰り返しを避けるために、2 つの呼び出しを組み合わせました。

うまくいけば、何が起こっているのか、何をする必要があるのか​​ を簡単に把握できるようになります。

于 2013-05-02T16:39:03.130 に答える