作者彙整:joyhsu

google map 改用 api方式嵌入

原因:幫客戶做網站,要嵌入英文版的地圖。原本先使用google map的嵌入語法。結果對方說我們看到的都是中文。雖然說只要對方語系會是英文就會自動轉,不過想說如果可以強迫轉英文是更好,客戶也比較沒得說嘴。所以就上網搜了一下。然後最近真的是覺得記憶退化嚴重,趁這次有做出來趕快紀錄一下,免得下次要用又要重來….

參考了這幾篇:

然後可以先比較一下google map平常提供的嵌入語法,是長這樣

<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3615.550013102598!2d121.5367189!3d25.015402!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xec78966a3d7b4efc!2z5ZyL56uL6Ie654Gj5aSn5a2455Sf5ZG956eR5a246aSo!5e0!3m2!1szh-TW!2stw!4v1534244255311″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

嵌入結果是這樣

API的嵌入語法則是長這樣

<iframe src=”https://www.google.com/maps/embed/v1/place?key=AIzaSyBOLwZNcRE9yn0-tythMMwX5OIkpEbpFWw&q=106台北市大安區舟山路237號(NTU Department of Life Science)&language=en” width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

嵌入結果長這樣

參數說明:

sublime快速鍵紀錄

(用mac要把ctrl改成cmd)

ctrl 多選同時修改
游標先放在第一個要修改的地方,按著ctrl再點選多個地方,就會同時看到多個地方有游標閃爍,輸入文字就會同時在多個地方一起插入

ctrl+d
選一個字串,按著快速鍵就可以同時把畫面上其他地方這個字串一個一個選起來(按一次快速鍵就會選下一個)。
全部選起來之後可以一起編輯。(可用這個方式一定程度取代ctrl+f然後設定取代文字的功能)

ctrl+[ 跟 ctrl+]
記得要改英打輸入。把原始碼左縮排或右縮排。

ctrl+l
把同一行整行選起來(要刪除整行的話很方便),按多次就會一行一行一直往下選喔。

ctrl+/
把游標所在那行整行註解起來。如果選多行,就整塊一起註解起來

shift
點選後按shift可連續選取多行

【emmet】

標籤內文
如果要在標籤內文一起打。用{}把內文文字匡起來。
例如一個class名為.link的「立刻贊助」的連結可以這樣打
a.link{立刻贊助}

{}內的$應用
例如打
ul>li{預設選項}*10
展開的li內文字都會相同。但項目多這樣會分不清楚,
改打
ul>li{預設選項$}*10
展開的文字後面就會從1開始帶數字下去

圖片取代文字圖片超連結桌機可行但手機會無法點選之問題

<a>總統府</a>

a{
height:1px;
overflow:hidden;
padding:30px 0 0 0;
background:url(image/icon.jpg);
}

以上設定在桌機呈現上 a是可以點選的,滑鼠移上去整個padding的區塊也會是有hover效果、也可以點擊的。但是換成行動裝置(手機、平板),點選icon會沒有反應。也就是在行動裝置上hover的範圍只有height:1px;不含padding的範圍。

改成以下在手機上就可以點

a{
height:31px;
overflow:hidden;
text-indent:-1000px;
background:url(image/icon.jpg);
}

就是還是要用縮排的方式隱藏文字。

postion:fixed;表頭設定fixed且希望無論視窗大小都置中的作法

小正正網站有實作範例,先看範例:上下左右都置中的區塊。簡單說明實作方法(因為我要處理的主要是左右置中,上下置中的理論相同就不重複。

  1. 由於fixed的定位是認瀏覽器,而不認父元素的position,所以先使用left:50%的方式。讓定位點定在瀏覽器的中間(也就是不管螢幕放到縮小,物件都會固定在瀏覽器的中間。
  2. 然後再使用margin-left,設定負值拉回。因為如果畫面都要置中,一定都會將要置中的物件設定一個寬度,例如1000px,那這個時候只要向左拉回500px即可。
  3. 因為我要處理的header我希望他寬度可以延伸,所以我設定的時候把總寬設定成2000px,因此往左要拉回1000px。

小正正有提供positioniseverything的網站,很值得參考喔!

處理float造成父元素無法撐開的方法

有三種方法,這三種方法暫時不管IE的適用性,以firefox、google等較遵循W3C的瀏覽器來看。

  1. overflow:
    優點是一行就可以解決。缺點是如果版面上有的元素的定位希望超出版面之外的時候,就會被隱藏
  2. float:
    父元素設定寬度搭配float,缺點是父元素以外的東西要在加clear或用別的方式避免掉父元素float造成問題
  3. after:
    設定方法如下(參考文章http://www.positioniseverything.net/easyclearing.html/),此處clearfix為父元素的class

      .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }
    缺點是比較囉嗦,但是如果定位要定在框框以外不會被隱藏,也能夠避免父元素設float造成的更多問題。