0

1 つのマーカーで開始位置を示す Google マップを作成しました。そこから、場所を切り替える可能性があります。その後、1 つのマーカーで新しい場所が表示されます。

ロケーションの切り替えとは別に、2 つのメイン ロケーションのそれぞれにサブ ロケーションを選択することができます。

2 つの変数 (場所ごとに 1) を作成するのが最善だと思いました [例]:

var locationsBerlin = [
    ['Berlin 1', 52.519433,13.406746, 1],
    ['Berlin 2', 52.522606,13.40366, 2],
    ['Berlin 3', 52.52113,13.409411, 3],
    ['Berlin 4', 52.517043,13.402394, 4],
    ['Berlin 5', 52.51703,13.412801, 5],
    ['Berlin 6', 52.525086,13.399798, 6],
    ['Berlin 7', 52.525151,13.410741, 7]
];

これが、「メイン」の場所を選択する方法です。

markerMain = new google.maps.Marker({
        position: new google.maps.LatLng(locationsBerlin[0][1], locationsBerlin[0][2]),
        map: map,
        icon: customPin
    });

配列の残りの部分はサブロケーションです。ここで、ユーザーがリンクを押して、var 内の残りの場所を表示できるようにしたいと考えています (場所の量は動的になります)。

そこでトグルリンクをクリックした後に呼び出される関数を作ってみました。

function subLocationBerlin(){
    alert("berlin sub");
    for (i = 1; i < locationsBerlin.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locationsBerlin[i][1], locationsBerlin[i][2]),
            map: map
        });
        markers.push(marker);
    }
}

しかし今、私は立ち往生しています。何らかの理由で、追加のマーカーがマップに追加されず、何が問題なのかわかりません。

ここでフィドルを見つけることができます: http://jsfiddle.net/gvMSX/3/

4

1 に答える 1

0

マップ変数 (初期化され、マップを表示しているもの) は、初期化関数に対してローカルです。

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

その前の「var」を削除して、グローバル バージョンを初期化します。

また、JavaScript 配列は 0 ベースであることにも注意してください。for ループで i を 1 に初期化すると、最初のマーカーが失われます。

function subLocationBerlin(){
    console.log('Berlin Sub Called');
    for (i = 1; i < locationsBerlin.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locationsBerlin[i][1], locationsBerlin[i][2]),
            map: map
        });
        markers.push(marker);
        console.log(marker);
    }
}
于 2013-07-11T19:38:57.523 に答える