Clever Geek Handbook

Yandex.Mapsで自動的にオフィスをマークします

POSの開発されたネットワークを持つ大企業向け。 オフィスは、オフィスを閉じてから開き、移動する典型的な状況です...当然、これは会社のウェブサイトに反映され、既存の顧客や潜在的な顧客を失い、不快にならないように、できるだけ早く反映される必要があります。

同時に、通常発生するように、サイトの情報はさまざまなレベルのコンピュータースキルを持つ従業員によって入力されます。アドレスを修正することはできますが、カードにマークを挿入することはできなくなります。



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に関するトラブルはありません。



ここですべての仕組みを見ることができます 。


More articles:


All Articles