2

誰かが私を助けてくれるのではないかと思います。

まず、私はこれに比較的慣れていないので、しばらくお待ちください。

このページをまとめて、ユーザーが選択した [カテゴリ] チェック ボックスに関連する Google マップ マーカーと関連する [サイドバー] アイテムを表示および非表示にできるようにしました。

私が今試みていて、非常に困難なことは、サイドバーのフォーマットを変更して、このページに示されているものに似るようにすることです。

上記のリンクの例と同様に、マップ マーカーをクリックすると、関連するサイドバー アイテムが強調表示される機能も追加したいと思います。

私はこれをかなり長い間機能させようとしてきましたが、ただぐるぐる回っているようです。

誰かがこれを見て、どうすればこれを達成できるかについてのガイダンスを提供できるかどうか疑問に思いました.

多くの感謝と親切な敬意

4

1 に答える 1

1

次のコードを置き換えるだけです。

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

これについて：

google.maps.event.addListener(marker, 'click', function() { 
   infowindow.setContent(contentString);
   $("#sidebar a").css('background-color','');//remove sidebar links back colors
   sidebarlink = $("#sidebar a:contains('"+marker.mydescription+"')");
   sidebarlink.css('background-color','#58FAD0');
   infowindow.open(map,marker); 
});

これにより、サイドバー リンクの背景色が設定されます。色を好きな色に変更したり、リンクに好みの他の CSS スタイルを追加したりできます。

また、上記のコードが失敗するように、mydescription変数の説明テキストに'引用符または二重引用符が含まれていないことを確認してください。"

これが期待どおりに機能するかどうかを教えてください。

また、マップのどこかをクリックしたとき (マーカーの外側をクリックしたときなど) にサイドバー リンクから背景色も削除したい場合は、次のコードを置き換えてください。

google.maps.event.addListener(map, 'click', function() { 
   infowindow.close(); 
});

これについて：

google.maps.event.addListener(map, 'click', function() { 
   $("#sidebar a").css('background-color','');//remove sidebar links back colors
   infowindow.close(); 
});

サイドバー リンクにカーソルを合わせると背景色が変化するようにするには (問題 1)、次の CSS コードを任意の<style type="text/css">ブロックに追加するだけです。

#sidebar a:hover{
   background-color: #58FAD0;   
}​
于 2012-09-27T15:45:56.123 に答える