2

Google マップ コントロールに統合されたチェックボックスに少し問題があります。

Google Maps API v3 ドキュメントでは、「カスタム コントロール」( https://developers.google.com/maps/documentation/javascript/examples/control-custom )を使用できると書かれていますが、ドロップダウン メニューについては何もありません。私はネットサーフィンをしていて、ブリアナ・サリバンのこの例を見つけました:

http://vislab-ccom.unh.edu/~briana/examples/gdropdown/index.html

Google マップ コントロールに統合されたチェックボックスを含むドロップダウン メニューが表示されます。

私は自分のウェブでそれを行うことができ、さらに何かを追加してコーディングしました。その例では、チェックボックスをオンにすると、基本的なアラートが表示されます。私の場合、チェックボックスをオンにすると、Google マップのマーカーが非表示になり、同じチェックボックスをもう一度クリックすると、Google マップのマーカーが再び表示されます。

マーカー カテゴリごとに 1 つのチェックボックスを含むドロップダウン メニューを使用します。このようにして、マップ内のすべてのマーカーをカテゴリごとに表示/非表示にすることができます。

私の問題は、Javascript からチェックボックスをチェックする方法も、デフォルトでチェックされているようにそれらのチェックボックスを初期化する方法も知らないことです。

これらのチェックボックスをマウスでクリックせずにチェックするのを手伝ってくれませんか?

上記でリンクしたブリアナの例にすべてがあるため、ここではjsfiddleの例を使用しません。

ありがとう！！

編集:コードを追加しています...

var checkOptions0 = {
    gmap: map,
    title: "aaa",
    id: "1",
    label: "aaa",
    action: function(){
        showhide("1");
    }
}
var check0 = new checkBox(checkOptions0);
var checkOptions1 = {
    gmap: map,
    title: "bbb",
    id: "2",
    label: "bbb",
    action: function(){
        showhide("2");
    }
}
var check1 = new checkBox(checkOptions1);
var ddDivOptions = {
    items: [check0, check1],
    id: "myddOptsDiv"
}
var dropDownDiv = new dropDownOptionsDiv(ddDivOptions);               
var dropDownOptions = {
    gmap: map,
    name: 'Boxes',
    id: 'ddControl',
    title: 'Boxes',
    position: google.maps.ControlPosition.TOP_RIGHT,
    dropDown: dropDownDiv
}
var dropDown1 = new dropDownControl(dropDownOptions);

function showhide(category) {
    for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].id == category) {
            estado = gmarkers[i].getVisible();
            gmarkers[i].setVisible(!estado);
        }
    }
}

「gmarkers」は、マップに印刷されたすべてのマーカーを含む配列です。「gmarkers[i].id」は各マーカーのカテゴリであり、チェックボックスをクリックすると、チェックボックスと同じ ID が定義されているすべてのマーカーがマップ上で非表示/表示されます。

4

1 に答える 1

2

最後に解決策を見つけました。先日はあまり賢くなかったと思います :D

Briana が使用するスクリプトは次のとおりです。http://vislab-ccom.unh.edu/~briana/examples/gdropdown/gdropdown.js

それを変更し、後に新しい行を追加する

bDiv.id = options.id;

こちらです：

bDiv.id = options.id;
bDiv.style.display = options.display == "" ? "none" : options.display;

これで、チェックボックスをオンにするかどうかを新しいオプション「display」で定義できます。「none」または「block」の 2 つの値を使用します。

次に、新しいオプション「display」を使用して、自分の質問に表示されているチェックボックスオプションを設定します。

var checkOptions0 = {
    gmap: map,
    title: "aaa",
    id: "1",
    label: "aaa",
    action: function(){
        showhide("1");
    },
    display: 'block'
}

とにかく@geocodezipに感謝します!! :)

于 2013-11-01T11:35:24.203 に答える