同時に、通常発生するように、サイトの情報はさまざまなレベルのコンピュータースキルを持つ従業員によって入力されます。アドレスを修正することはできますが、カードにマークを挿入することはできなくなります。
Yandex.Maps APIのおかげで、これを打ち負かすことができます。
私はプログラマーではないので、すぐに言わなければならないので、以下のコードは完璧ではなく、修正やコメントは大歓迎です。 しかし、突然誰かが助けてくれるでしょう。
私の場合、サイトエンジンに変更を加えることができないため、状況は複雑でした。当時利用できたのは、JavaScriptをサポートするビジュアルエディターだけでした。
タスクは次のとおりです。情報を変更するには、テーブル内のアドレスを置き換えるか、コピー&ペーストを使用して新しいオフィスを追加するだけで、すばやく簡単に変更できました。
Yandex.Maps APIおよびjqueryタブ-デフォルトではオフィスのリスト、2番目のタブ-地図が使用されます。 マップをクリックすると、マップが拡大され、このポイントを中心に配置されます。
//
そして、HTMLではまだ簡単です:
<div id = "tabs"> <ul> <li> <a href="#fragment-1"> <span>リスト</ span> </a> </ li> <li> <a href="#fragment-2">地図上の<span> </ span> </a> </ li> </ ul> <div id = "fragment-1"> <table id = "adresses" width = "600" border = "0"> <tbody> <tr> <td width = "200"> <b> m。Preobrazhenskaya Square </ b> </ td> <td> 107023、モスクワ、st。 Elektrozavodskaya、d。27、p。8 <br /> (495)799-97-99 <br /> <a href = "#" onclick = "Return ShowOnMap(this);" class = "popup">ロケーションマップ</a> </ td> </ tr> <tr> <td> <b> m。コムソモールスカヤ</ b> <br> 営業日:午前9時-午後8時 土曜日:10:00-18:00 </ td> <td> 107078、モスクワ、Orlikov per。、d。5、p。3 <br /> (495)799-97-99 <br /> <a href = "#" onclick = "Return ShowOnMap(this);" class = "popup">ロケーションマップ</a> </ td> </ tr> ..... </ tbody> </ table> </ div> <div id = "fragment-2"> <!-地図を表示-> <div id = "YMapsID" style = "width:600px; height:400px"> </ div> </ div> </ div> <script type = "text / javascript"> var _tabs = $( "#tabs")。tabs(); loadMap(); $( "#tabs")。bind( "tabsshow"、function(event、ui){ if(ui.panel.id == "fragment-2"){ map.redraw(); } else { if(isSingleOffice){ map.addOverlay(場所); map.closeBalloon(); isSingleOffice = false; } } }); </ script>
私たちが望んでいたことを達成したことがわかりました-テーブルには、Yandexマップへのリンクと経験の浅いユーザー向けのjavascriptに関するトラブルはありません。
ここですべての仕組みを見ることができます 。