2011-07-11 17:43

為 Blogger 的地點標記加上 Google Maps 呈現

Blogger 增加了一個標記地點的功能，但只有標記也不知道能拿來做什麼，後來想想用JS寫了一個呈現的小程式，讓文章中設定的資訊可以直接呈現。

以下程式不支援 IE，因為我不想在我的 Blog 上用 Framework，所以 IE 就沒辦法呈現，哈！只要將以下其中一個的程式碼加在 </body> 之前就可以了。

在[文章]的最[前面]插入地圖
原始碼
  1. <script type="text/javascript"> 
  2. function showGoogleMap(pos){ 
  3.    var w=300,h=300,z=14; 
  4. try { 
  5.    var postOuter=document.getElementsByClassName(&#039;post-outer&#039;); 
  6.    for(var i=0; i&lt;postOuter.length; i++){ 
  7.        var postLocation=postOuter[i].getElementsByClassName(&#039;post-location&#039;)[0]; 
  8.        var point=postLocation.getElementsByTagName(&#039;a&#039;)[0]; 
  9.        if(!point){continue;} 
  10.        var mapIframe=&#039;&lt;iframe width=&quot;&#039;+w+&#039;&quot; height=&quot;&#039;+h+&#039;&quot; src=&quot;&#039;+point.href+&#039;&amp;output=embed&amp;iwloc=z&amp;z=&#039;+z+&#039;&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;&gt;&lt;/iframe&gt;&lt;br /&gt;&#039;; 
  11.        var postBody=postOuter[i].getElementsByClassName(&#039;post-body&#039;)[0]; 
  12.  
  13.        switch(pos){ 
  14.            case &#039;loc-a&#039;: 
  15.                postLocation.innerHTML+=mapIframe; 
  16.                break; 
  17.            case &#039;loc-b&#039;: 
  18.                postLocation.innerHTML=mapIframe+postLocation.innerHTML; 
  19.                break; 
  20.            case &#039;post-a&#039;: 
  21.                postBody.innerHTML+=mapIframe; 
  22.                break; 
  23.            case &#039;post-b&#039;: 
  24.            default: 
  25.                postBody.innerHTML=mapIframe+postBody.innerHTML; 
  26.                break; 
  27.        } 
  28.    } 
  29. }catch(e){} 
  30. } 
  31. showGoogleMap(&#039;post-b&#039;); 
  32. </script> 

在[文章]的最[後面]插入地圖
原始碼
  1. <script type="text/javascript"> 
  2. function showGoogleMap(pos){ 
  3.    var w=300,h=300,z=14; 
  4. try { 
  5.    var postOuter=document.getElementsByClassName(&#039;post-outer&#039;); 
  6.    for(var i=0; i&lt;postOuter.length; i++){ 
  7.        var postLocation=postOuter[i].getElementsByClassName(&#039;post-location&#039;)[0]; 
  8.        var point=postLocation.getElementsByTagName(&#039;a&#039;)[0]; 
  9.        if(!point){continue;} 
  10.        var mapIframe=&#039;&lt;iframe width=&quot;&#039;+w+&#039;&quot; height=&quot;&#039;+h+&#039;&quot; src=&quot;&#039;+point.href+&#039;&amp;output=embed&amp;iwloc=z&amp;z=&#039;+z+&#039;&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;&gt;&lt;/iframe&gt;&lt;br /&gt;&#039;; 
  11.        var postBody=postOuter[i].getElementsByClassName(&#039;post-body&#039;)[0]; 
  12.  
  13.        switch(pos){ 
  14.            case &#039;loc-a&#039;: 
  15.                postLocation.innerHTML+=mapIframe; 
  16.                break; 
  17.            case &#039;loc-b&#039;: 
  18.                postLocation.innerHTML=mapIframe+postLocation.innerHTML; 
  19.                break; 
  20.            case &#039;post-a&#039;: 
  21.                postBody.innerHTML+=mapIframe; 
  22.                break; 
  23.            case &#039;post-b&#039;: 
  24.            default: 
  25.                postBody.innerHTML=mapIframe+postBody.innerHTML; 
  26.                break; 
  27.        } 
  28.    } 
  29. }catch(e){} 
  30. } 
  31. showGoogleMap(&#039;post-a&#039;); 
  32. </script> 

在[地點]的[前面]插入地圖
原始碼
  1. <script type="text/javascript"> 
  2. function showGoogleMap(pos){ 
  3.    var w=300,h=300,z=14; 
  4. try { 
  5.    var postOuter=document.getElementsByClassName(&#039;post-outer&#039;); 
  6.    for(var i=0; i&lt;postOuter.length; i++){ 
  7.        var postLocation=postOuter[i].getElementsByClassName(&#039;post-location&#039;)[0]; 
  8.        var point=postLocation.getElementsByTagName(&#039;a&#039;)[0]; 
  9.        if(!point){continue;} 
  10.        var mapIframe=&#039;&lt;iframe width=&quot;&#039;+w+&#039;&quot; height=&quot;&#039;+h+&#039;&quot; src=&quot;&#039;+point.href+&#039;&amp;output=embed&amp;iwloc=z&amp;z=&#039;+z+&#039;&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;&gt;&lt;/iframe&gt;&lt;br /&gt;&#039;; 
  11.        var postBody=postOuter[i].getElementsByClassName(&#039;post-body&#039;)[0]; 
  12.  
  13.        switch(pos){ 
  14.            case &#039;loc-a&#039;: 
  15.                postLocation.innerHTML+=mapIframe; 
  16.                break; 
  17.            case &#039;loc-b&#039;: 
  18.                postLocation.innerHTML=mapIframe+postLocation.innerHTML; 
  19.                break; 
  20.            case &#039;post-a&#039;: 
  21.                postBody.innerHTML+=mapIframe; 
  22.                break; 
  23.            case &#039;post-b&#039;: 
  24.            default: 
  25.                postBody.innerHTML=mapIframe+postBody.innerHTML; 
  26.                break; 
  27.        } 
  28.    } 
  29. }catch(e){} 
  30. } 
  31. showGoogleMap(&#039;loc-b&#039;); 
  32. </script> 


實際呈現樣式：


分類： , , , ,
相關文章 ：

0 回應:

張貼留言

訂閱： 張貼留言 (Atom)