2

122 個のマーカー、複数のカテゴリ (12) を使用して Google マップをセットアップしました。フォームからマーカーをオン/オフするために、各マーカーが使用している画像に従ってフィルターを作成できますか? 別の変数を「カテゴリ」変数として定義したほうがよいでしょうか? JQuery を使用している場合、コードを再構築して機能させるにはどうすればよいですか?

任意のアイデアをいただければ幸いです。

JScript は次のようになります。

function initialize() {

var myOptions = {
    center: new google.maps.LatLng(,),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.TERRAIN
};        
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);

var image = [];             //define an array to store category images
image['church']='icons/chapel-2.png'
image['monastery']='icons/convent-2.png'
image['archaeo']='icons/monument.png'
image['wild']='icons/wildlife.png'
image['museum']='icons/museum_openair.png'
image['beach']='icons/beach.png'
image['must']='icons/star.png'
image['summit']='icons/peak.png'
image['cave']='icons/cave-2.png'
image['forest']='icons/palmTree.png'
image['gorge']='icons/canyon-2.png'
image['village']='icons/smallcity.png'

//define 122 markers as below until var marker122 (no comments here I am trying to keep it simple..

         var marker = new google.maps.Marker({
         position: new google.maps.LatLng(,), 
         map: map,
         title: 'placeName',
         clickable: true,
         icon: image['must']
});

HTML は次のようになります。

<form action="#">
Must Visit: <input type="checkbox" id="mustbox" onclick="boxclick(this,'must')" /> &nbsp;&nbsp;
            Beaches: <input type="checkbox" id="beachbox" onclick="boxclick(this,'beach')" /> &nbsp;&nbsp;
            Archaeology: <input type="checkbox" id="archaeobox" onclick="boxclick(this,'archaeo')" /> &nbsp;&nbsp;
            Church: <input type="checkbox" id="religionnbox" onclick="boxclick(this,'church')" /> &nbsp;&nbsp;
        Monastery: <input type="checkbox" id="conventbox" onclick="boxclick(this,'convent')" /> &nbsp;&nbsp;
        Gorge: <input type="checkbox" id="gorgebox" onclick="boxclick(this,'gorge')" /> &nbsp;&nbsp;
            Cave: <input type="checkbox" id="cavetbox" onclick="boxclick(this,'cave')" /> &nbsp;&nbsp;
            Forest: <input type="checkbox" id="forestbox" onclick="boxclick(this,'forest')" /> &nbsp;&nbsp;
            Wildlife: <input type="checkbox" id="wildbox" onclick="boxclick(this,'wild')" /> &nbsp;&nbsp;
            Museum: <input type="checkbox" id="museumbox" onclick="boxclick(this,'museum')" /> &nbsp;&nbsp;
        Villages: <input type="checkbox" id="villagebox" onclick="boxclick(this,'village')" /><br />
            Mountain Summit: <input type="checkbox" id="summitbox" onclick="boxclick(this,'summit')" /><br />

4

2 に答える 2

1

複数のマップ マーカーにフィルターを作成すると、非常に効率的に機能します。私はプロジェクトの1つでそれを行いました。フィルターとしてドロップダウンがある場合、ドロップダウン フィルターの選択された値は、表示と非表示をその可視性プロパティに設定するだけで、マップ メーカー オブジェクトに適用されます。これを行うには、javascript で collection(array) を操作する必要があります。最初に、すべての Google マーカー オブジェクトをコレクションに追加します。任意のフィルターが選択されている場合は、そのコレクションからマップ マーカー オブジェクトのプロパティを変更するだけで、可視性、画像、その他のプロパティなどのプロパティを変更できます。非常に効率的に機能することがわかります。フィルターを選択した時点で新しいオブジェクトを作成しないでください。マップが滑らかにならなくなります。

于 2013-06-20T11:49:18.863 に答える