Google Maps API - 自定地圖類型

之前在『新增地圖控制項、地圖類型』一篇中已介紹過關於地圖類型的設定，以及可以使用的地圖類型（G_NORMAL_MAP 地圖、G_SATELLITE_MAP 衛星、G_HYBRID_MAP 混合、G_PHYSICAL_MAP 地形）。在 Google Maps API 也可以定義自己的地圖類型，並開發全新的顯示樣式。

可以透過 GTileLayer 建構圖塊疊加層， GMapType 建構新的地圖類型，並使用 GMap2.addMapType() 方法將其添加到地圖。

<br />//設定版權訊息<br />var myCopyright = new GCopyrightCollection("Lazy Worm's Island ");<br />myCopyright.addCopyright(new GCopyright('Ian Jung',<br /> new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),<br /> 0,'©2009 Ian Jung')); <br />//建構圖塊疊加層<br />var myTileLayer = new GTileLayer(myCopyright, 0, 2, { tileUrlTemplate: 'ij-map-{Z}-{X}-{Y}.png', <br /> isPng:true,<br /> opacity:1.0<br /> });<br />//建構新的地圖類型<br />var IJ_LAZYWORM_ISLAND_MAP = new GMapType([myTileLayer],<br /> new GMercatorProjection(23), <br /> "Island", <br /> { shortName: "IJ_Island", alt: "顯示 Lazy Worm's Island" });<br /><br /><br />var myMap = new GMap2(document.getElementById("my_map"));<br />myMap.setCenter(new GLatLng(0, 0), 1);<br /><br />myMap.getMapTypes().length = 0;<br />myMap.addMapType( G_NORMAL_MAP );<br />myMap.addMapType( IJ_LAZYWORM_ISLAND_MAP );<br />myMap.setMapType( IJ_LAZYWORM_ISLAND_MAP );<br /><br />myMap.addControl(new GLargeMapControl());<br />myMap.addControl(new GMapTypeControl());<br />
看範例所呈現的結果

1. 設定版權訊息

地圖通常包含從一些外部機構購買、生成或許可的圖片。這些圖片通常需要顯示版權訊息，在某些情況下（例如衛星數據），地圖上不同位置的圖片可能來自不同的來源。為了在自定地圖類型上顯示動態版權訊息，Google Maps API 提供了大量對象來存放版權訊息，並提供了基於當前視窗和縮放級別對此版權訊息實現檢索的方法和接口。

GCopyrightCollection(prefix?:String)︰管理自定義地圖類型的地圖上顯示的版權訊息。
GCopyright(id:Number, bounds:GLatLngBounds, minZoom:Number, text:String)︰版權對象包含以下訊息：哪個版權訊息適用於指定縮放級別的矩形地圖地區。

設定版權訊息詳細說明

2. 建構地圖圖塊層

GTileLayer(copyrights:GCopyrightCollection, minResolution:Number, maxResolution:Number, options?:GTileLayerOptions)︰您可以實現此接口，以透過 GMapType 或 GTileLayerOverlay 提供自定的地圖圖塊層。此接口的實現應使用 GTileLayer 實例作為原型，因為這樣可以為您實現版權處理。

在 GTileLayerOptions 物件中的的 tileUrlTemplate 屬性，是指定圖塊網址模板，該模板可以針對每個圖塊請求而展開，以根據現有的圖塊坐標引用唯一的圖塊。將模板置於 GTileLayer 構造函數中可允許您使用此坐標系動態檢索圖塊，檢索方式類似於 Google 地圖檢索圖塊的方式。模板的格式應該為︰
http://host/ij-map-{Z}-{X}-{Y}.png
，其中 X 和 Y 分別指緯度和經度圖塊坐標，Z 指縮放級別，比如 http://host/ij-map-2-3-1.png。

圖塊坐標


Google 地圖坐標，圖塊製作詳細說明

3. 建構新的地圖類型

GMapType(layers:GTileLayer[], projection:GProjection, name:String, opts?:GMapTypeOptions)︰實現自己的自定地圖類型。要在地圖中顯示地圖類型，請使用 GMap2.addMapType() 方法。

參考︰
‧class GCopyrightCollection
‧class GCopyright
‧class GTileLayer
‧GTileLayerOptions
‧class GMapType
‧GMapTypeOptions

更多教學文件在此︰Google Maps API - 前言及目錄

Google Maps API - 標註管理器

在 Google Maps 添加大量標註可能會降低顯示地圖的速度，也會產生太多視覺混亂，尤其是在處於某些縮放級別時。標註管理器 GMarkerManager 提供了一個解決這些問題的方案，允許在同一個地圖上高效顯示數百個標記，並能夠在不同的縮放級別指定所要顯示的標註。

下面這個範例我們創建了台灣縣市的鄉鎮市區行政區位置標註地圖。在縮放級別 7 到 10，僅顯示縣市。然後對於縮放級別 11 到 14，將所有鄉鎮市區顯示出來。
<br />var officeLayer = [<br /> {<br /> "zoom": [7, 10],<br /> "places": [<br /> { "name":"台北市", "icon":"sun", "posn":[25.091075, 121.5598345] },<br /> { "name":"基隆市", "icon":"sun", "posn":[25.1089809, 121.7081454] },<br /> .....<br /> ]<br /> },<br /> {<br /> "zoom": [11, 14],<br /> "places": [<br /> { "name":"台北市中正區", "icon":"snow", "posn":[25.0421407, 121.5198716] },<br /> { "name":"台北市大同區", "icon":"snow", "posn":[25.0627243, 121.5113064] },<br /> { "name":"台北市中山區", "icon":"snow", "posn":[25.0792018, 121.5427093] },<br /> .....<br /> ]<br /> }<br />];<br /><br />//取得 Icon<br />function getIcon( icon ) {<br /> var iconPath = "http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/";<br /> var myIcon = new GIcon();<br /> myIcon.image = iconPath + icon +".png";<br /> myIcon.iconAnchor = new GPoint(16, 16);<br /> myIcon.infoWindowAnchor = new GPoint(16, 6);<br /> myIcon.iconSize = new GSize(32, 32);<br /> myIcon.shadow = iconPath + icon + "-shadow.png";<br /> myIcon.shadowSize = new GSize(59, 32);<br /><br /> return myIcon;<br />}<br /><br />//建立標註<br />function createMarker( oPlace ) {<br /> var myIcon = getIcon(oPlace["icon"]);<br /> var myLatLng = new GLatLng(oPlace["posn"][0], oPlace["posn"][1]);<br /> var myMarker = new GMarker(myLatLng, { title:oPlace["name"], icon:myIcon });<br /> GEvent.addListener(myMarker, "click", function(){<br /> myMarker.openInfoWindowHtml(oPlace["name"]);<br /> });<br /> return myMarker;<br />}<br /><br /><br />function load() {<br /> if (GBrowserIsCompatible()) {<br /> var myMap = new GMap2(document.getElementById("my_map"));<br /> var myLatLng = new GLatLng(25.0426818, 121.6516113);<br /> myMap.setCenter(myLatLng, 9);<br /> myMap.addControl(new GLargeMapControl());<br /> <br /> var myMgr = new GMarkerManager(myMap);<br /> for (var i in officeLayer) {<br /> var oLayer = officeLayer[i];<br /> var lyMarkers = [];<br /> for (var j in oLayer["places"]) {<br /> lyMarkers.push( createMarker(oLayer["places"][j]) );<br /> }<br /> myMgr.addMarkers(lyMarkers, oLayer["zoom"][0], oLayer["zoom"][1]);<br /> }<br /> myMgr.refresh();<br /> }<br />}<br />
看範例所呈現的結果

var myMgr = new GMarkerManager(myMap); 建立一個標註管理器物件，其中 myMap 就是要控制的指定地圖。

GMarkerManager.addMarkers(markers, minZoom, maxZoom?) 向此標記管理器添加一批標註。直到調用 refresh() 方法時，才會向地圖添加這批標註。將標註置於地圖中後，如果這些標註都在地圖的當前視窗範圍內並且地圖的縮放級別高於或等於指定的 minZoom，則顯示標註。如果設定了 maxZoom，則在地圖的縮放級別高於或等於指定級別時自動刪除標註。

GMarkerManager.refresh(); 強制管理器更新地圖上顯示的標註。如果是使用 addMarkers 方法添加的標註，則必須調用此方法。

GMarkerManager.addMarker(marker, minZoom, maxZoom?) 向此管理器控制的標記集合添加單個標註。如果標註的位置在地圖的當前視窗範圍內，並且地圖的縮放級別屬於指定的縮放級別範圍，則立即向地圖添加標註。與 addMarkers 方法類似，minZoom 和可選的 maxZoom 參數指定顯示標註的縮放級別範圍。

參考︰
‧class GMarkerManager︰addMarkers(markers, minZoom, maxZoom?)、refresh()、GMarkerManager.addMarker(marker, minZoom, maxZoom?)

更多教學文件在此︰Google Maps API - 前言及目錄

Google Maps API - 設定地圖控制項位置及自訂地圖控制項

‧地圖控制項位置設定

之前已經介紹過如何透過 GMap2.addControl(control) 添加地圖控制項。addControl 方法有一個非必填的第二參數 GControlPosition(anchor, offset) 可以指定該控制項在地圖上的位置。

anchor 為一常數分別代表地圖的四個角落。
G_ANCHOR_TOP_RIGHT 地圖的右上角
G_ANCHOR_TOP_LEFT 地圖的左上角
G_ANCHOR_BOTTOM_RIGHT 地圖的右下角
G_ANCHOR_BOTTOM_LEFT 地圖的左下角。

offset 為 GSize(width, height) 物件來表示控制項距離地圖邊緣多少像素。
<br />var myMap = new GMap2(document.getElementById("my_map"));<br />myMap.setCenter(new GLatLng(25.08532, 121.561498), 11);<br /> <br />var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));<br />myMap.addControl(new GLargeMapControl(), topRight);<br />
看範例所呈現的結果

‧自訂地圖控制項

Google Maps API 還允許透過創建 GControl 的子類自訂地圖控制項。從技術角度上講，不是使用 JavaScript 建立對象的 subclass，而是將 prototype 對象分配給 GControl 對象的實例。

自訂可用的地圖控制項，至少為該類定義以下兩個方法︰

initialize() 方法必須返回 DOM 元素，並透過 GMap2.getContainer() 取得包含地圖的 DOM 元素添加到地圖中。

getDefaultPosition() 方法必須返回類型為 GControlPosition，向地圖返回預設情況下控制項在地圖中出現的位置。
<br />//ImgZoomControl 是顯示「放大」和「縮小」按鈕的 GControl，先定義函數。<br />function ImgZoomControl() {<br />}<br /><br />//要建立 GControl 的子類，我們將 prototype 對象設置為 GControl 對象的一個實例。<br />ImgZoomControl.prototype = new GControl();<br /><br />//為每個按鈕創建一個 DIV，並將其放在容器 DIV 中，然後返回容器 DIV 作為我們的控件元素。<br />//將該控件添加到地圖容器中，並將其返回，以便地圖類能正確地放置它。<br />ImgZoomControl.prototype.initialize = function(map) {<br /> var container = document.createElement("div");<br /> <br /> var zoomInDiv = document.createElement("div");<br /> zoomInDiv.innerHTML = '<img src="add.png" width="32" height="32" border="0" style="cursor:pointer;" />';<br /> GEvent.addDomListener(zoomInDiv, "click", function() {<br /> map.zoomIn();<br /> });<br /> container.appendChild(zoomInDiv);<br /> <br /> var zoomOutDiv = document.createElement("div");<br /> zoomOutDiv.innerHTML = '<img src="del.png" width="32" height="32" border="0" style="cursor:pointer;" />';<br /> GEvent.addDomListener(zoomOutDiv, "click", function() {<br /> map.zoomOut();<br /> });<br /> container.appendChild(zoomOutDiv);<br /> <br /> map.getContainer().appendChild(container);<br /> return container;<br />}<br /><br />//預設情況下，該控制項將在地圖的左上角顯示，邊距為 7 像素。<br />ImgZoomControl.prototype.getDefaultPosition = function() {<br /> return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));<br />}<br /><br />function load() {<br /> if (GBrowserIsCompatible()) {<br /> var myMap = new GMap2(document.getElementById("my_map"));<br /> myMap.setCenter(new GLatLng(25.08532, 121.561498), 11);<br /> <br /> myMap.addControl(new ImgZoomControl());<br /> }<br />}<br />
看範例所呈現的結果

參考︰
‧class GMap2︰addControl(control, position?)，getContainer()
‧class GControlPosition
‧class GSize
‧enum GControlAnchor
‧interface GControl


更多教學文件在此︰Google Maps API - 前言及目錄

Google Maps API - 地圖座標定位

在程式的應用上可以利用 Google Maps API 取得經緯度座標，這裡介紹兩種取得經緯度座標的方法。

方法一︰透過單擊地圖取得經緯度座標
<br />var myMap = new GMap2(document.getElementById("my_map"));<br />var myLatLng = new GLatLng(25.04763902653048, 121.51715755462646);<br />myMap.setCenter(myLatLng, 15);<br />myMap.addControl(new GLargeMapControl());<br />document.getElementById('inLatLng').value = myLatLng.toString();<br /><br />var myMarker = new GMarker( myLatLng );<br />myMap.addOverlay( myMarker );<br /> <br />GEvent.addListener(myMap, "click", function( overlay, point ){<br /> if(point){<br /> //設定標註座標<br /> myMarker.setLatLng(point);<br /> document.getElementById('inLatLng').value = point.toString();<br /> }<br /> });<br />
<br />LatLng︰<input id="inLatLng" name="inLatLng" type="text" size="40" value="" /><br />
看範例所呈現的結果

在上個單元『在地圖上新增標註』中，已大致介紹過 GEvent。在這同樣透過 GEvent.addListener(source, event, handler) 針對 GMap2 註冊一個事件處理程序 click，當滑鼠單擊地圖時會回傳兩個參數 overlay 及 point。如果單擊了某個標記，則該標記將通過 overlay 參數傳遞給事件處理程序，並且還在標記上觸發 click 事件。否則，被單擊點的地理坐標 GLatLng 將在 point 參數中傳遞。

所以在這個例子中，當單擊地圖某個點時使用 GMarker.setLatLng(point) 重新設定標註座標，並將所取得的座標值填入表單中的 inLatLng 欄位。

方法二︰透過地址輸入取得經緯度座標
<br />var myMap;<br />var myMarker<br />function load() {<br /> if (GBrowserIsCompatible()) {<br /> myMap = new GMap2(document.getElementById("my_map"));<br /> var myLatLng = new GLatLng(25.04763902653048, 121.51715755462646);<br /> myMap.setCenter(myLatLng, 15);<br /> myMap.addControl(new GLargeMapControl());<br /> document.getElementById('inLatLng').value = myLatLng.toString();<br /> <br /> myMarker = new GMarker( myLatLng );<br /> myMap.addOverlay( myMarker );<br /> }<br />}<br /><br />function addressGps() {<br /> var myGeocoder = new GClientGeocoder();<br /> var address = document.getElementById('address').value;<br /> myGeocoder.getLatLng(address, function getRequest( point ){<br /> if(!point){<br /> alert('這個地址 Google 說不知道！');<br /> }else{<br /> //移動地圖中心點<br /> myMap.panTo( point );<br /> //設定標註座標<br /> myMarker.setLatLng(point);<br /> document.getElementById('inLatLng').value = point.toString();<br /> }<br /> });<br />}<br />
<br />Address︰<input id="address" name="address" type="text" size="40" value="" /><br /><input name="button" type="button" value="Search" onclick="javascript:addressGps();" /><br />LatLng︰<input id="inLatLng" name="inLatLng" type="text" size="40" value="" /><br />
看範例所呈現的結果

這裡要介紹一個新的物件 GClientGeocoder 地址解析器，現在已經支援台灣大部分的地址解析，但目前中國地圖地址解析只支援市/縣/區級別的地址。可以透過 GClientGeocoder.getLatLng(address, callback) 的方法對指定的地址進行地址解析，並將結果以 GLatLng 回傳。

在這例子中還使用了 GMap2.panTo(center) 移動地圖中心點。避免當所查詢的地址位置在地圖可見範圍之外，造成使用者找不到的情況。

補充︰透過經緯度座標取得地址 (2009/01/02)

使用方法與透過地址輸入取得經緯度座標很像，只是改用 GClientGeocoder 的 getLocations(GLatLng, callback) 方法。
<br />var myMap;<br />var myMarker<br />function load() {<br /> if (GBrowserIsCompatible()) {<br /> myMap = new GMap2(document.getElementById("my_map"));<br /> var myLatLng = new GLatLng(25.04763902653048, 121.51715755462646);<br /> myMap.setCenter(myLatLng, 15);<br /> myMap.addControl(new GLargeMapControl());<br /> <br /> myMarker = new GMarker( myLatLng );<br /> myMap.addOverlay( myMarker );<br /> }<br />}<br /><br />function getAddress() {<br /> var strLatLng = document.getElementById('latlng').value;<br /> strLatLng = strLatLng.replace("(", "[");<br /> strLatLng = strLatLng.replace(")", "]");<br /> var arrLatLng = eval(strLatLng);<br /> var myLatLng = new GLatLng(arrLatLng[0], arrLatLng[1]);<br /><br /> //移動地圖中心點<br /> myMap.panTo( myLatLng );<br /> //設定標註座標<br /> myMarker.setLatLng( myLatLng );<br /> <br /> var myGeocoder = new GClientGeocoder();<br /> myGeocoder.getLocations(myLatLng, function(addresses) {<br /> if(addresses.Status.code != 200) {<br /> alert("此座標沒有找到對應的地址 " + myLatLng.toUrlValue());<br /> } else { <br /> var result = addresses.Placemark[0];<br /> myMarker.openInfoWindowHtml( result.address );<br /> document.getElementById('address').value = result.address;<br /> }<br /> });<br />}<br />
<br />LatLng︰<input id="latlng" name="latlng" type="text" size="40" value="(25.037525, 121.563782)" /><br /><input name="button" type="button" value="Search" onclick="javascript:getAddress();" /><br />Address︰<input id="address" name="address" type="text" size="40" value="" /><br />
看範例所呈現的結果

不過所查詢出來的地址還是有點出入，例如︰我們透過地址（臺北市信義區市府路1號）所查出來的經緯度座標為（25.037525, 121.563782），但是用經緯度座標（25.037525, 121.563782）反查地址卻是（110台灣台北市信義區仁愛路四段）。

參考︰
‧class GMap2︰事件 click、panTo(center)
‧class GEvent︰addListener(source, event, handler)
‧class GMarker︰setLatLng(point)
‧class GClientGeocoder︰getLatLng(address, callback)、getLocations(GLatLng, callback)


更多教學文件在此︰Google Maps API - 前言及目錄

Google Maps API - 在地圖上新增標註

在 Google Maps 如果想要加上標記及視窗說明，這可以使用 GMarker 物件來加以實現。
<br />var myMap = new GMap2(document.getElementById("my_map"));<br />myMap.setCenter(new GLatLng(25.08532, 121.561498), 11);<br /> <br />var myMarker = new GMarker( new GLatLng(25.08532, 121.561498) );<br />myMap.addOverlay( myMarker );<br /><br />myMarker.openInfoWindowHtml( "這裡是台北市" );<br />
看範例所呈現的結果

var myMarker = new GMarker( new GLatLng(25.08532, 121.561498) ); 建立一個 GMarker 物件，設定位置在經度 25.08532，緯度 121.561498 的位置上。

GMap2.addOverlay(overlay) 將加疊層加入地圖中，這裡我們將新建立的 GMarker 加入地圖中。

GMarker.openInfoWindowHtml(content, opts?) 在標記圖示之上打開地圖訊息視窗。如果要關閉已打開的訊息視窗可以使用 GMarker.closeInfoWindow()。

在上面的範例中是否覺得陽春了點，再來看看下面這個範例，我們將針對加在地圖上的標記做些改變，並加入動作事件處理程序。
<br />var myMap = new GMap2(document.getElementById("my_map"));<br />myMap.setCenter(new GLatLng(25.08532, 121.561498), 11);<br /> <br />var myIcon = new GIcon();<br />//Icon 圖片 (必要)<br />myIcon.image = "http://ianjung.googlepages.com/ian_map_icon.png";<br />//Icon 左上角相對於 (必要)<br />myIcon.iconAnchor = new GPoint(-3, 13);<br />//訊息視窗相對於 Icon 左上角位置 (必要)<br />myIcon.infoWindowAnchor = new GPoint(-3, 12);<br />//Icon 尺寸<br />myIcon.iconSize = new GSize(70, 26);<br />//陰影圖片<br />myIcon.shadow = "http://ianjung.googlepages.com/ian_map_icon_shadow.png";<br />//陰影尺寸<br />myIcon.shadowSize = new GSize(70, 26);<br />//拖拽標記時視覺上垂直「上升」的距離離<br />myIcon.maxHeight = 20;<br /> <br />var myMarker = new GMarker( new GLatLng(25.08532, 121.561498), {icon:myIcon, draggable:true} );<br />myMap.addOverlay( myMarker );<br />myMarker.openInfoWindowHtml( "這裡是台北市" );<br /><br />//單擊事件 <br />GEvent.addListener(myMarker, "click", function(){<br /> myMarker.openInfoWindowHtml( "我被點擊了" );<br /> });<br />//開始拖拽事件<br />GEvent.addListener(myMarker, "dragstart", function(){<br /> myMarker.closeInfoWindow();<br /> });<br />//結束拖拽事件<br />GEvent.addListener(myMarker, "dragend", function(){<br /> myMarker.openInfoWindowHtml( "我被拖曳到這裡" );<br /> });<br />
看範例所呈現的結果

這裡介紹一個改變地圖上標記呈現相當重要的物件 GIcon，這可以讓我們建立屬於自己的圖示，使用在 GMarker 上。針對 GIcon 有許多屬性可加以設定，必須要注意 image、iconAnchor、infoWindowAnchor 這三個是必要屬性，如果省略將會照成執行上的錯誤。

var myMarker = new GMarker( new GLatLng(25.08532, 121.561498), {icon:myIcon, draggable:true} ); 在這範例中，建立 GMarker 物件多加了一個參數設定 GMarkerOptions，此為一個物件我們設定了兩個屬性。icon 指定所使用的圖示 GIcon；draggable 使用者是否可拖拽此標記，true 為可拖曳，默認值為 false。

GEvent 在 Google Maps API 中所有事件都是透過此來加以定義，包含地圖本身的事件處理，至於有那些事件可以使用必須參考每個物件中事件部分的說明。所以這範例我們透過 GEvent.addListener(source, event, handler)，針對 GMarker 註冊了三個事件處理程序，分別為 click、dragstart、dragend。

在之前的所有範例中可以發現經常出現的兩個物件，GLatLng 是以緯度和經度表示的地理座標點。GPoint 是以像素座標表示的地圖上的一點。這兩個物件為 Google Maps API 中定義地圖上座標的主要物件，在往後的教學範例中還會經常看見它們。

參考︰
‧class GMap2︰addOverlay(overlay)
‧class GMarker︰openInfoWindowHtml(content, opts?)、closeInfoWindow()
‧class GMarkerOptions
‧class GIcon
‧class GEvent︰addListener(source, event, handler)
‧class GLatLng
‧class GPoint


更多教學文件在此︰Google Maps API - 前言及目錄

Google Maps API - 新增地圖控制項、地圖類型

‧地圖控制項

在使用 Google Map 時會有地圖縮放及地圖類型切換等控制項，這裡可以使用 GMap2 物件的方法 addControl(control) 來新增地圖控制項。
<br />var myMap = new GMap2(document.getElementById("my_map"));<br />myMap.setCenter(new GLatLng(25.08532, 121.561498), 11);<br /> <br />myMap.addControl(new GLargeMapControl());<br />myMap.addControl(new GMapTypeControl());<br />
看範例所呈現的結果

如果要將已經存在地圖上的控制項移除，可以使用 GMap2.removeControl(control)。
<br />var myMap = new GMap2(document.getElementById("my_map"));<br />myMap.setCenter(new GLatLng(25.08532, 121.561498), 11);<br /><br />var myGLargeMapControl = new GLargeMapControl();<br />myMap.addControl( myGLargeMapControl );<br />var myGMapTypeControl = new GMapTypeControl();<br />myMap.addControl( myGMapTypeControl );<br /><br />myMap.removeControl( myGLargeMapControl );<br />

可使用的控制項如下︰

GLargeMapControl() 帶有可在四個方向平移、放大、縮小的按鈕，以及縮放滑塊的控制項。
GSmallMapControl() 帶有可在四個方向平移、放大和縮小的按鈕的控制項。
GSmallZoomControl() 帶有放大和縮小按鈕的控制項。
GScaleControl() 顯示地圖比例尺的控制項。
GOverviewMapControl() 可摺疊的迷你地圖控制項。
GMapTypeControl() 帶有切換地圖類型的按鈕的控制項。
GMenuMapTypeControl() 帶有切換地圖類型的下拉式的控制項。

‧地圖類型

在地圖類型切換控制項會出現那些地圖類型，是依據此地圖中註冊了那些地圖類型，預設已註冊 G_NORMAL_MAP、G_SATELLITE_MAP、G_HYBRID_MAP 等三個地圖類型，地圖類型顯示預設為 G_NORMAL_MAP，這裡可以透過幾個方法來做更改。
<br />var myMap = new GMap2(document.getElementById("my_map"));<br />myMap.setCenter(new GLatLng(25.08532, 121.561498), 11);<br />myMap.addControl(new GMapTypeControl());<br /> <br />myMap.getMapTypes().length = 0;<br />myMap.addMapType( G_NORMAL_MAP );<br />myMap.addMapType( G_PHYSICAL_MAP );<br /> <br />myMap.setMapType( G_PHYSICAL_MAP );<br />
看範例所呈現的結果

在這個範例中更改了地圖類型註冊為 G_NORMAL_MAP、G_PHYSICAL_MAP，並將地圖類型顯示更改為 G_PHYSICAL_MAP。

GMap2.getMapTypes() 取得地圖中註冊的地圖類型陣列，這裡我用了偷雞的方法直接用 myMap.getMapTypes().length = 0; 將這個陣列長度設為 0，先將預設已註冊的三個地圖類型清除。

GMap2.addMapType( type ) 新增地圖類型，type 必須為已知的地圖類型 GMapType。

GMap2.setMapType( type ) 設定顯示的地圖類型，type 必須為已知的地圖類型 GMapType。

如果要將已註冊的地圖類型移除可以使用 GMap2.removeMapType( type ) ，所以上個範例也可以這樣做，如下。
<br />var myMap = new GMap2(document.getElementById("my_map"));<br />myMap.setCenter(new GLatLng(25.08532, 121.561498), 11);<br />myMap.addControl(new GMapTypeControl());<br /> <br />myMap.removeMapType( G_SATELLITE_MAP );<br />myMap.removeMapType( G_HYBRID_MAP );<br />myMap.addMapType( G_NORMAL_MAP );<br />myMap.addMapType( G_PHYSICAL_MAP );<br /> <br />myMap.setMapType( G_PHYSICAL_MAP );<br />
可使用的地圖類型如下︰

G_NORMAL_MAP 地圖
G_SATELLITE_MAP 衛星
G_HYBRID_MAP 混合
G_PHYSICAL_MAP 地形

除了 Google Maps 所提供的四種地圖類型之外，Google Maps API 也允許使用者建立自己的地圖類型，這部份在往後會再做詳盡的說明。

參考︰
‧class GMap2︰addControl(control, position?)，removeControl(control)
‧class GControl
‧class GMap2︰getMapTypes()，setMapType(type)，addMapType(type)，removeMapType(type)
‧class GMapType


更多教學文件在此︰Google Maps API - 前言及目錄

Google Maps API - 第一個範例在網頁嵌入 Google Map

在生成 Google Maps API Key 的頁面會看到 Google Maps API 的第一個範例，如下︰
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /><html xmlns="http://www.w3.org/1999/xhtml"> <br /> <head> <br /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <br /> <title>Google Maps JavaScript API Example</title> <br /> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAG_4i2swR3KOd-nGYrlrt8RTkyS8SRe_kYPTAbwTumvAqao01PRRUcCtCzTBnNH2kRURGR8RhQQoZ3w" type="text/javascript"></script> <br /> <script type="text/javascript"> <br /> //<![CDATA[ <br /> <br /> function load() { <br /> if (GBrowserIsCompatible()) { <br /> var map = new GMap2(document.getElementById("map")); <br /> map.setCenter(new GLatLng(37.4419, -122.1419), 13); <br /> } <br /> } <br /> <br /> //]]> <br /> </script> <br /> </head> <br /> <body onload="load()" onunload="GUnload()"> <br /> <div id="map" style="width: 500px; height: 300px"></div> <br /> </body> <br /></html> <br />
看範例所呈現的結果

http://maps.google.com/maps?file=api&v=2&key=XXXXXX 其中 key= 後面就是你所取得的 Google Maps API Key。

<div id="map" style="width: 500px; height: 300px"></div> 用來擺置 Google Map，其中 style="width: 300px; height:300px" 則是指定地圖區塊大小。

GBrowserIsCompatible() 判斷 Google Maps API 是否可用於當前的瀏覽器中，如當前瀏覽器支援 Google Maps API 則回傳 true。

var map = new GMap2(document.getElementById("map")); 宣告一個 GMap 物件，其中 "map" 就是先前用來擺置 Google Map 所宣告 div 標籤的 id。

map.setCenter(new GLatLng(37.4419, -122.1419), 13); 將地圖的中心點設定在經度 37.4419 和緯度 -122.1419，而 Zoom Level 在這範例中設成 13（1 為最大，數字越大 Zoom Level 越小）。在這或許會有個疑問，要怎麼知道某個地點的經緯度？可以利用 Google Map 找到要的地點固定在中間，然後按下『連結至此網頁』 URL 上就有該點的經緯度了，例如 http://maps.google.com/maps?ie=UTF8&ll=25.08532,121.561498&spn=0.291039,0.6427&z=11 紅字部分就是該點的經緯度。在往後的教學中會再介紹如何運用 Google Maps API 取得經緯度。

<body onload="load()" onunload="GUnload()"> 釋放 Google Maps API，在這要注意的是應在頁面的 unload 事件處理程序中使用此函數，不可在 Google Maps API 執行中使用。

參考︰
‧class GMap2︰setCenter(center, zoom?, type?)
‧function GBrowserIsCompatible
‧function GUnload


更多教學文件在此︰Google Maps API - 前言及目錄

Google Maps API - 前言及目錄

Google Maps API 發佈了好一段時間，目前已經發展到 2.0 的版本，讓我最開心的是 Google Maps API 提供了中文說明文件，雖然是簡體中文但是這已經足夠我們更容易閱讀使用了。

在這將陸續對 Google Maps API 的使用做一些經驗教學，你會發現這是多麼簡單的一件事情，而各篇教學也將會在這篇文中統一建立目錄以方便閱讀。

Goole Maps API 使用上有些法律上的限制要注意：

• 你的 Google Maps 服務必須免費開放給一般使用者。


• 如果你預估你的地圖服務會有超過每天 50,000 筆頁面的存取量，請主動聯絡 Google。


• Google 會不定期更新 API，你有責任跟著更新你的網頁中的 API。


• 你不能更改或隱藏 Google 的 logo。


• Google 有權力以後在地圖上放廣告，而你不能更改或破壞這些廣告。


• 有些地圖應用是 Google 不希望看到的，例如指明哪些地方可以購買到毒品或是任何違法行為。

這些限制我想一般簡單的應用都不太會觸及，目前為止，Google 也尚未在地圖上擺放廣告。

首先我們必須申請 Google Maps API Key，申請一個 API key。

當您閱讀完 Google Maps API 的一些說明及使用條款後，勾選『我已閱讀並同意這些條款和條件』，並在『我的網址：』輸入你要使用 Google Maps API 的位址。如果要在 http://www.domainname.com/mysxite/xxx.htm 應該要輸入 http://www.domainname.com/mysxite/，那麼所取得的 Key 只對 http://www.domainname.com/mysxite/ 之下的頁面有效，也可以針對 http://www.domainname.com/ 來申請，如此在 http://www.domainname.com/ 之下的所有頁面都可以使用這個 Key，當然包含 http://www.domainname.com/mysxite/ 之下的頁面。最後按下『生成 API 密鑰』，將會在下個頁面取得 Google Maps API Key。

目錄︰

。第一個範例在網頁嵌入 Google Map
。新增地圖控制項、地圖類型
。在地圖上新增標註
。地圖座標定位
。設定地圖控制項位置及自訂地圖控制項
。標註管理器
。自定地圖類型

更多教學將在以後持續新增。

相關資料︰

Google Maps API 參考文件
Google Maps API 使用條款
Google Maps API 範例

PHP - JSON Functions

之前曾介紹過 JSON 文件資料，以往在 PHP4 的時候我們必須去 JSON 下載 Class 來使用。不過在 PHP5 已經將 JSON Functions 包含在裡面了。

分別為 json_encode 及 json_decode 兩個函式，用法如下。

json_encode：
<br />$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);<br />echo json_encode($arr);<br />
上例將輸出：
<br />{"a":1,"b":2,"c":3,"d":4,"e":5}<br />
json_decode：
<br />$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';<br />var_dump(json_decode($json));<br />var_dump(json_decode($json, true));<br />
上例將輸出：
<br />object(stdClass)#1 (5) {<br /> ["a"] => int(1)<br /> ["b"] => int(2)<br /> ["c"] => int(3)<br /> ["d"] => int(4)<br /> ["e"] => int(5)<br />}<br /><br />array(5) {<br /> ["a"] => int(1)<br /> ["b"] => int(2)<br /> ["c"] => int(3)<br /> ["d"] => int(4)<br /> ["e"] => int(5)<br />}<br />

上線前請先壓縮並優化你的 JavaScript 檔案

為了讓網站更符合使用者介面，AJAX 技術使得 javascript 被大量使用，但載入大量的 javascript 外部檔案（.js 文件檔）對於頁面顯示的速度影響甚多，上線前壓縮並優化 JavaScript 檔案，將可以改善這樣的情況，以下幾個做法提供給大家參考。

1. 合併 .js 文件檔

主要目的在於減少使用 <script> 標籤數量，當瀏覽器遇到一個這個標籤，就要啟動 javascript 分析引擎。這是一個很大的開銷，理想情況下是一個頁面只進行一次分析，所以儘可能合併 .js 文件檔，來改善這個情形。

2. 縮小及模糊化 .js 文件檔

縮小的意思就是刪除不必要的任何東西，如註解等；模糊化是更進一步的做法，主要是重新命名，重新安排功能和變數，以便它們的名字更短，模糊化不但可以使檔案更小，更是通常用來將 javascript 原始碼保密的一種方式。

JSMin 是一個對 javascript 縮小化非常好的工具，另外一個模糊化的工具就是 Packer，這兩個都是免費且很好用的工具。個人建議是先用 JSMin 將所有 .js 文件檔縮小合併，在使用 Packer 做模糊化的工作。以下有兩個範例供參考︰

jsMin.php︰
<br />include_once( 'class.jsmin.php' ); <br />$_arrFiles = array( 'script_1.js', 'script_2.js', 'script_3.js' );<br />$js_code = "";<br />foreach ($_arrFiles as $file) { <br /> $js_code .= JSMin::minify( file_get_contents( $file ) ) . "\n";<br />}<br />file_put_contents('scriptMin.js', $js_code);<br />
jsPacker.php︰
<br />include_once( 'class.JavaScriptPacker.php' ); <br />$js_code = file_get_contents( 'scriptMin.js' );<br />$Packer = new JavaScriptPacker($js_code, 'Normal', true, false);<br />$packed = $Packer->pack();<br />file_put_contents( 'scriptPacker.js', $packed );<br />
以上兩段程式的動作，就是將 script_1.js、script_2.js、script_3.js，先透過 JSMin 縮小合併產生 scriptMin.js，再用 Packer 模糊化產生 scriptPacker.js 這就是我們最終要的檔案。要注意的是在寫 js 程式時必須養成習慣，每個 function 結束後一定要有分號『;』，每個語句後面如果不是大括號括起來的，也一定要有分號。否則經過 Packer 模糊化後將無法正常執行。
<br />function sayHi(){<br /> alert('Hi!'); //語句後面如果不是大括號括起來需有分號<br />}; //function 結束後一定要有分號<br />
在之前的一個專案中，所有 .js 文件檔共有 13 個檔案 126KB，經過 JSMin 縮小合併後成為 1 個檔案 75KB，最後 Packer 所產生的檔案只有 45KB，如此 .js 文件檔縮小為原本的 36% 可見有多驚人。

3. 將 .js 文件檔放在頁面的底部

由於 .js 文件檔的性質可以改變頁面的任何東西，當瀏覽器遇到一個 <script> 標籤時，它會妨礙整個下載。知道一個 script 要下載分析了，便會優先下載 .js 文件檔進行分析完才會開始顯示網頁，在這之前使用者就只會看到白白的一片畫面。所以盡可能將 <script> 標籤擺在頁面的最底部 </body> 之前，如此便可讓使用者先看到部分畫面，而非一片空白等待著。

FCKeditor - HTML 所見即所得線上編輯器

FCKeditor 是一個專門使用在網頁上屬於開放原始碼的 HTML 所見即所得線上編輯器，它可和 ASP.Net、ASP、ColdFusion、PHP、Java、Active-FoxPro、Lasso、Perl、Python 等不同的程式語言相結合。

FCKeditor 更相容於絕大部分的網頁瀏覽器 Internet Explorer 5.5+、Mozilla Firefox 1.5+、Netscape 7.1+、Opera 9.50+、Safari 3.0+、Camino 1.0+。

FCKeditor 程式編碼為 UTF-8，內建了各種語言的語系檔，其中當然也包含了繁體中文。

「FCKeditor」名稱中的「FCK」是這個編輯器的作者的名字 Frederico Caldeira Knabben 的縮寫。



官方網站︰http://www.fckeditor.net/

Ajax 不可不知的核心物件 XMLHttpRequest

Ajax (Asynchronous JavaScript and XML) 由 HTML、JavaScript 技術、DHTML 和 DOM 組成，JavaScript 是在 Client 端所執行的程式，並無法直些與 Server 端的資料庫溝通。但是 Ajax 的主要精神就是在頁面不 Reload，或者跳頁的情況下對 Server 端的資料庫進行溝通。這時候我們就必須用到 JavaScript 的一個物件 XMLHttpRequest。

XMLHttpRequest 是 Ajax 應用程式的核心，透過 XMLHttpRequest 物件 JavaScript 便可以與伺服器進行對話。這個物件對剛要開始碰觸 Ajax 的人應該有些陌生，如果你會寫 PHP、ColdFusion 那麼應該對 curl、cfhttp 很熟悉，其實 XMLHttpRequest 的功能與其是差不多的。

這樣來說好了 XMLHttpRequest 就是在幫助 JavaScript 模擬一個隱形的瀏覽器，透過 HTTP 的方式去拜訪 Server 端的程式，所以我們需要給它所要拜訪程式的網址，同樣的我們也可以傳送 GET、POST 的參數給 Server 端的程式。當 Server 端的程式執行完成後便會回傳頁面呈現結果給 XMLHttpRequest。

但是 PHP、ColdFusion 是 Server 端執行的程式，其 AP Server 會負責確定所請求的服務不管執行結果是如何，回應完成了沒有。然而 JavaScript 卻是在 Client 端所執行的程式，所以並不會有人幫你確定這點，這部份就必須要我們自己來做了。

當我們運用 XMLHttpRequest 對 Server 端請求服務的時便進入一個迴圈，會不段回傳 HTTP 就緒狀態，其狀態如下︰

0 : 請求未初始化。
1 : 請求已經建立，但是還沒有發送。
2 : 請求已發送，正在處理中。
3 : 請求在處理，但是伺服器還沒完成回應。
4 : 回應已完成。

每種瀏覽器會有些差異，但這可以不必過於擔心，我們只需要最後回傳 HTTP 就緒狀態為 4﹙回應已完成﹚的結果，這部份在各瀏覽器是一致的。

接下來我們還需要注意的是在不同瀏覽器 JavaScript 程式的用法有很大的部份是不同的，說穿了其實就是只有微軟的 IE 跟人家不同，這裡也會遇到同樣的問題。在 Firefox 與其它瀏覽器我們是用 XMLHttpRequest 這個物件沒有錯，而 IE 並沒有這個物件存在而是用一個叫做 ActiveXObject 的物件，後續用法其實是一樣的。

到這裡我一直沒有提到 XMLHttpRequest 真正實際的用法，如果你還有興趣了解更多，請參閱相關閱讀內的資料。

相關閱讀︰
。developerWorks 中国: 掌握 Ajax 系列
。developerWorks 中国: Ajax 資源中心

Ajaxload - Ajax loading gif generator

運用 AJAX 技術 User 常常需要等待後端程式處理的時間，是不是希望有個美美的 Loading 的圖片告訴 User 呢，來這自己訂製一個吧。

Ajaxload.info



另外 AJAX Activity Indicators 這裡也有一些現成的喔。

irt.org Home Page

自己看了就知道。

irt.org

用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

Pulling It All Together

　　最後我們擁有了所有的 drag/drop 的腳本片斷！下一個事情是我們將創建一個 DOM 處理。如果你不是很熟悉，請先閱讀我的 JavaScript Primer on DOM Manipulation。

　　下面的代碼將創建 container(容器)，而且使任何一個需要 drag/dro p的 item 變成一個容器的 item。代碼在這個文章第二個 demo 的後面，它可以用戶記錄一個 list(清單)，定為一個導航窗口在左邊或者右邊，或者更多的函數你可以想到的。

　　下一步我們將透過 "假代碼" 讓 reader 看到真代碼，下面為推薦︰

　　1、當document第一次載入時，創建 dragHelper DIV.dragHelper 將給移動的 item 加陰影。真實的 item 沒有被 dragged，只是用了 insertBefor 和 appendChild 來移動了，我們隱藏了 dragHelper。

　　2、有了 mouseDown 與 mouseUp 函數。所有的操作會對應到當到 iMouseDown 的狀態中，只有當 mouse 左鍵為按下時 iMouseDown 才為真，否則為假。

　　3、我們創建了全局變量 DragDrops 與全局函數 CreateDragContainer.DragDrops 包含了一系列相對彼此的容器。任何參數 (containers) 將透過 CreatedcragContainer 進行重組與序列化，這樣可以自由的移動。CreateDragContainer 函數也將 item 進行綁定與設定屬性。

　　4、現在我們的代碼知道每個 item 的加入，當我們移動處 mouseMove，mouseMove 函數首先會設定變量 target，滑鼠移動在上面的 item，如果這個 item 在容器中 (checked with getAttribute)︰

　* 運行一小段代碼來改變目標的樣式。創造 rollover 效果。
　* 檢查滑鼠是否沒有放開，如果沒有︰
　　o 設定 curTarget 代表目前 item。
　　o 記錄 item 的目前位置，如果需要的話，我們可以將它返回。
　　o 克隆目前的 item 到 dragHelper 中，我們可以移動帶陰影效果的 item。
　　o item 拷貝到 dragHelper 後，原有的 item 還在滑鼠指針下，我們必須刪除掉 dragObj，這樣腳本起作用，dragObj 被包含在一個容器中。
　　o 抓取容器中所有的 item 目前坐標，高度/寬度，這樣隻需要記錄一次，當 item 被 drag 時，每隨 mouse 移動，每移鐘就會記錄成千上萬次。
　* 如果沒有，不需要做任何事，因為這不是一個需要移動的 item。

　　5、檢查 curTarget，它應該包含一個被移動的 item，如果存在，進行下面操作：

　* 開始移動帶有陰影的 item，這個 item 就是前文所創建的。
　* 檢查每個目前容器中的container，是否滑鼠已經移動到這些範圍內了。
　　o 我們檢查看一下正在拖曳的 item 是屬於哪個 container。
　　o 放置 item 在一個 container 的某一個 item 之前，或者整個 container 之後。
　　o 確認 item 是可見的。
　* 如果滑鼠不在 container 中，確認 item 是不可見了。

　　6、剩下的事就是捕捉 mouseUp 的事件了。

實現一個拖曳的全代碼：

<br />// iMouseDown represents the current mouse button state: up or down<br />/*<br />lMouseState represents the previous mouse button state so that we can<br />check for button clicks and button releases:<br /><br />if(iMouseDown && !lMouseState) // button just clicked!<br />if(!iMouseDown && lMouseState) // button just released!<br />*/<br />var mouseOffset = null;<br />var iMouseDown = false;<br />var lMouseState = false;<br />var dragObject = null;<br /><br />// Demo 0 variables<br />var DragDrops = [];<br />var curTarget = null;<br />var lastTarget = null;<br />var dragHelper = null;<br />var tempDiv = null;<br />var rootParent = null;<br />var rootSibling = null;<br /><br />Number.prototype.NaN0=function(){return isNaN(this)?0:this;}<br /><br />function CreateDragContainer(){<br /> /*<br /> Create a new "Container Instance" so that items from one "Set" can not<br /> be dragged into items from another "Set"<br /> */<br /> var cDrag = DragDrops.length;<br /> DragDrops[cDrag] = [];<br /><br /> /*<br /> Each item passed to this function should be a "container". Store each<br /> of these items in our current container<br /> */<br /> for(var i=0; i<arguments.length; i++){<br /> var cObj = arguments[i];<br /> DragDrops[cDrag].push(cObj);<br /> cObj.setAttribute('DropObj', cDrag);<br /><br /> /*<br /> Every top level item in these containers should be draggable. Do this<br /> by setting the DragObj attribute on each item and then later checking<br /> this attribute in the mouseMove function<br /> */<br /> for(var j=0; j<cObj.childNodes.length; j++){<br /><br /> // Firefox puts in lots of #text nodes...skip these<br /> if(cObj.childNodes[j].nodeName=='#text') continue;<br /><br /> cObj.childNodes[j].setAttribute('DragObj', cDrag);<br /> }<br /> }<br />}<br /><br />function mouseMove(ev){<br /> ev = ev || window.event;<br /><br /> /*<br /> We are setting target to whatever item the mouse is currently on<br /><br /> Firefox uses event.target here, MSIE uses event.srcElement<br /> */<br /> var target = ev.target || ev.srcElement;<br /> var mousePos = mouseCoords(ev);<br /><br /> // mouseOut event - fires if the item the mouse is on has changed<br /> if(lastTarget && (target!==lastTarget)){<br /> // reset the classname for the target element<br /> var origClass = lastTarget.getAttribute('origClass');<br /> if(origClass) lastTarget.className = origClass;<br /> }<br /><br /> /*<br /> dragObj is the grouping our item is in (set from the createDragContainer function).<br /> if the item is not in a grouping we ignore it since it can't be dragged with this<br /> script.<br /> */<br /> var dragObj = target.getAttribute('DragObj');<br /><br /> // if the mouse was moved over an element that is draggable<br /> if(dragObj!=null){<br /><br /> // mouseOver event - Change the item's class if necessary<br /> if(target!=lastTarget){<br /> var oClass = target.getAttribute('overClass');<br /> if(oClass){<br /> target.setAttribute('origClass', target.className);<br /> target.className = oClass;<br /> }<br /> }<br /><br /> // if the user is just starting to drag the element<br /> if(iMouseDown && !lMouseState){<br /> // mouseDown target<br /> curTarget = target;<br /><br /> // Record the mouse x and y offset for the element<br /> rootParent = curTarget.parentNode;<br /> rootSibling = curTarget.nextSibling;<br /><br /> mouseOffset = getMouseOffset(target, ev);<br /><br /> // We remove anything that is in our dragHelper DIV so we can put a new item in it.<br /> for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]);<br /><br /> // Make a copy of the current item and put it in our drag helper.<br /> dragHelper.appendChild(curTarget.cloneNode(true));<br /> dragHelper.style.display = 'block';<br /><br /> // set the class on our helper DIV if necessary<br /> var dragClass = curTarget.getAttribute('dragClass');<br /> if(dragClass){<br /> dragHelper.firstChild.className = dragClass;<br /> }<br /><br /> // disable dragging from our helper DIV (it's already being dragged)<br /> dragHelper.firstChild.removeAttribute('DragObj');<br /><br /> /*<br /> Record the current position of all drag/drop targets related<br /> to the element. We do this here so that we do not have to do<br /> it on the general mouse move event which fires when the mouse<br /> moves even 1 pixel. If we don't do this here the script<br /> would run much slower.<br /> */<br /> var dragConts = DragDrops[dragObj];<br /><br /> /*<br /> first record the width/height of our drag item. Then hide it since<br /> it is going to (potentially) be moved out of its parent.<br /> */<br /> curTarget.setAttribute('startWidth', parseInt(curTarget.offsetWidth));<br /> curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight));<br /> curTarget.style.display = 'none';<br /><br /> // loop through each possible drop container<br /> for(var i=0; i<dragConts.length; i++){<br /> with(dragConts[i]){<br /> var pos = getPosition(dragConts[i]);<br /><br /> /*<br /> save the width, height and position of each container.<br /><br /> Even though we are saving the width and height of each<br /> container back to the container this is much faster because<br /> we are saving the number and do not have to run through<br /> any calculations again. Also, offsetHeight and offsetWidth<br /> are both fairly slow. You would never normally notice any<br /> performance hit from these two functions but our code is<br /> going to be running hundreds of times each second so every<br /> little bit helps!<br /><br /> Note that the biggest performance gain here, by far, comes<br /> from not having to run through the getPosition function<br /> hundreds of times.<br /> */<br /> setAttribute('startWidth', parseInt(offsetWidth));<br /> setAttribute('startHeight', parseInt(offsetHeight));<br /> setAttribute('startLeft', pos.x);<br /> setAttribute('startTop', pos.y);<br /> }<br /><br /> // loop through each child element of each container<br /> for(var j=0; j<dragConts[i].childNodes.length; j++){<br /> with(dragConts[i].childNodes[j]){<br /> if((nodeName=='#text') || (dragConts[i].childNodes[j]==curTarget)) continue;<br /><br /> var pos = getPosition(dragConts[i].childNodes[j]);<br /><br /> // save the width, height and position of each element<br /> setAttribute('startWidth', parseInt(offsetWidth));<br /> setAttribute('startHeight', parseInt(offsetHeight));<br /> setAttribute('startLeft', pos.x);<br /> setAttribute('startTop', pos.y);<br /> }<br /> }<br /> }<br /> }<br /> }<br /><br /> // If we get in here we are dragging something<br /> if(curTarget){<br /> // move our helper div to wherever the mouse is (adjusted by mouseOffset)<br /> dragHelper.style.top = mousePos.y - mouseOffset.y;<br /> dragHelper.style.left = mousePos.x - mouseOffset.x;<br /><br /> var dragConts = DragDrops[curTarget.getAttribute('DragObj')];<br /> var activeCont = null;<br /><br /> var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) /2);<br /> var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight'))/2);<br /><br /> // check each drop container to see if our target object is "inside" the container<br /> for(var i=0; i<dragConts.length; i++){<br /> with(dragConts[i]){<br /> if(((getAttribute('startLeft')) < xPos) &&<br /> ((getAttribute('startTop')) < yPos) &&<br /> ((getAttribute('startLeft') + getAttribute('startWidth')) > xPos) &&<br /> ((getAttribute('startTop') + getAttribute('startHeight')) > yPos)){<br /><br /> /*<br /> our target is inside of our container so save the container into<br /> the activeCont variable and then exit the loop since we no longer<br /> need to check the rest of the containers<br /> */<br /> activeCont = dragConts[i];<br /><br /> // exit the for loop<br /> break;<br /> }<br /> }<br /> }<br /><br /> // Our target object is in one of our containers. Check to see where our div belongs<br /> if(activeCont){<br /> // beforeNode will hold the first node AFTER where our div belongs<br /> var beforeNode = null;<br /><br /> // loop through each child node (skipping text nodes).<br /> for(var i=activeCont.childNodes.length-1; i>=0; i--){<br /> with(activeCont.childNodes[i]){<br /> if(nodeName=='#text') continue;<br /><br /> // if the current item is "After" the item being dragged<br /> if(<br /> curTarget != activeCont.childNodes[i] &&<br /> ((getAttribute('startLeft') + getAttribute('startWidth')) > xPos) &&<br /> ((getAttribute('startTop') + getAttribute('startHeight')) > yPos)){<br /> beforeNode = activeCont.childNodes[i];<br /> }<br /> }<br /> }<br /><br /> // the item being dragged belongs before another item<br /> if(beforeNode){<br /> if(beforeNode!=curTarget.nextSibling){<br /> activeCont.insertBefore(curTarget, beforeNode);<br /> }<br /><br /> // the item being dragged belongs at the end of the current container<br /> } else {<br /> if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){<br /> activeCont.appendChild(curTarget);<br /> }<br /> }<br /><br /> // make our drag item visible<br /> if(curTarget.style.display!=''){<br /> curTarget.style.display = '';<br /> }<br /> } else {<br /><br /> // our drag item is not in a container, so hide it.<br /> if(curTarget.style.display!='none'){<br /> curTarget.style.display = 'none';<br /> }<br /> }<br /> }<br /><br /> // track the current mouse state so we can compare against it next time<br /> lMouseState = iMouseDown;<br /><br /> // mouseMove target<br /> lastTarget = target;<br /><br /> // track the current mouse state so we can compare against it next time<br /> lMouseState = iMouseDown;<br /><br /> // this helps prevent items on the page from being highlighted while dragging<br /> return false;<br />}<br /><br />function mouseUp(ev){<br /> if(curTarget){<br /> // hide our helper object - it is no longer needed<br /> dragHelper.style.display = 'none';<br /><br /> // if the drag item is invisible put it back where it was before moving it<br /> if(curTarget.style.display == 'none'){<br /> if(rootSibling){<br /> rootParent.insertBefore(curTarget, rootSibling);<br /> } else {<br /> rootParent.appendChild(curTarget);<br /> }<br /> }<br /><br /> // make sure the drag item is visible<br /> curTarget.style.display = '';<br /> }<br /> curTarget = null;<br /> iMouseDown = false;<br />}<br /><br />function mouseDown(){<br /> iMouseDown = true;<br /> if(lastTarget){<br /> return false;<br /> }<br />}<br /><br />document.onmousemove = mouseMove;<br />document.onmousedown = mouseDown;<br />document.onmouseup = mouseUp;<br /><br />window.onload = function(){<br /> // Create our helper object that will show the item while dragging<br /> dragHelper = document.createElement('DIV');<br /> dragHelper.style.cssText = 'position:absolute;display:none;';<br /> <br /> CreateDragContainer(<br /> document.getElementById('DragContainer1'),<br /> document.getElementById('DragContainer2'),<br /> document.getElementById('DragContainer3')<br /> );<br /><br /> document.body.appendChild(dragHelper);<br />}<br /><br /><!--the mouse over and dragging class are defined on each item--><br /><br /><div class="DragContainer" id="DragContainer1"><br /> <div class="DragBox" id="Item1" overClass="OverDragBox" dragClass="DragDragBox">Item #1</div><br /> <div class="DragBox" id="Item2" overClass="OverDragBox" dragClass="DragDragBox">Item #2</div><br /> <div class="DragBox" id="Item3" overClass="OverDragBox" dragClass="DragDragBox">Item #3</div><br /> <div class="DragBox" id="Item4" overClass="OverDragBox" dragClass="DragDragBox">Item #4</div><br /></div><br /><div class="DragContainer" id="DragContainer2"><br /> <div class="DragBox" id="Item5" overClass="OverDragBox" dragClass="DragDragBox">Item #5</div><br /> <div class="DragBox" id="Item6" overClass="OverDragBox" dragClass="DragDragBox">Item #6</div><br /> <div class="DragBox" id="Item7" overClass="OverDragBox" dragClass="DragDragBox">Item #7</div><br /> <div class="DragBox" id="Item8" overClass="OverDragBox" dragClass="DragDragBox">Item #8</div><br /></div><br /><div class="DragContainer" id="DragContainer3"><br /> <div class="DragBox" id="Item9" overClass="OverDragBox" dragClass="DragDragBox">Item #9</div><br /> <div class="DragBox" id="Item10" overClass="OverDragBox" dragClass="DragDragBox">Item #10</div><br /> <div class="DragBox" id="Item11" overClass="OverDragBox" dragClass="DragDragBox">Item #11</div><br /> <div class="DragBox" id="Item12" overClass="OverDragBox" dragClass="DragDragBox">Item #12</div><br /></div><br />

　　你現在擁有了拖拽的所有東西。

　　下面的三個 demo 是記錄事件歷史。當你的滑鼠在 item 上移動，將記錄所生的事件，如果你不明白可以嘗試一下滑鼠的劃過或者拖曳，看有什麼發生。

　　觀看範例

。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

今天因為要寫關於 JavaScript 捕捉滑鼠位置的程式，很意外的被我找到這篇文章，常常在很多網站看到大家用這樣的技術來做版面編排，但是都苦無方法來研究，看到了這篇文章讓我欣喜若狂，所以我擅自轉貼到我的筆記上，再找時間好好研究研究，為尊重原作者做以下申明︰ 原文︰How to Drag and Drop in JavaScript 作者︰Mark Kahn 譯者︰雪山老人 所有本文及範例檔案相關版權為以上作者所有。

用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚

　　你會注意到這個代碼幾乎是前面的全集，將前面的合在一起就實現了拖拽效果了。

　　當我們點擊一個 item 時，我們就穫取了很多變量，如滑鼠位置，滑鼠位置自然就包含了那個 item 的坐標資訊了。如果我們點擊了一個 20*20px 圖像的正中間，那麼滑鼠的相對坐標為 {x:10,y:10}。當我們點擊這個圖像的左上角那麼滑鼠的相對坐標為 {x:0,y:0}。當我們點擊時，我們用這個方法取得一些滑鼠與圖片校對的資訊。如果我們不能加載頁面 item，那麼資訊將是 document 資訊，會忽略了點擊的 item 資訊。

　　mouseOffset 函數使用了另一個函數 getPosition.getPosition 的作用是返回 item 相對頁面左上角的坐標，如果我們嘗試穫取 item.offsetLeft 或者 item.style.left，那麼我們將取得 item 相對與父級的位置，不是整個 document﹒所有的腳本我們都是相對整個 document，這樣會更好一些。

　　為了完成 getPosition 任務，必須循環取得 item 的父級，我們將加載內容到 item 的左／上的位置﹒我們需要管理想要的 top 與 left 清單。

　　自從定義了 mousemove 這個函數，mouseMove 就會一直運行。第一我們確定 item 的 style.position 為 absolute，第二我們移動 item 到前面定義好的位置。當 mouse 點擊被釋放，dragObject 被設定為 null，mouseMove 將不在做任何事。

Dropping an Item
　　前面的例子目的很簡單，就是拖拽 item 到我們希望到的地方。我們經常還有其他目的如刪除 item，比如我們可以將 item 拖到垃圾桶裏，或者其他頁面定義的位置。

　　很不幸，我們有一個很大的難題，當我們拖拽，item 會在滑鼠之下，比如 mouseove,mousedown,mouseup 或者其他 mouse action。如果我們拖拽一個 item 到垃圾桶上，滑鼠資訊還在 item 上，不在垃圾桶上。

　　怎麼解決這個問題呢？有幾個方法可以來解決。第一，這是以前比較推薦的，我們在移動滑鼠時 item 會跟隨滑鼠，並佔用了 mouseover/mousemove 等滑鼠事件，我們不這樣做，只是讓 item 跟隨著滑鼠，並不佔用 mouseover 等滑鼠事件，這樣會解決問題，但是這樣並不好看，我們還是希望 item 能直接跟在 mouse 下。

　　另一個選擇是不做 item 的拖拽。你可以改變滑鼠指針來顯示需要拖拽的 item，然後放在滑鼠釋放的位置。個解決方案，也是因為美學原因不予接受。

　　最後的解決方案是，我們並不去除拖拽效果。這種方法比前兩種繁雜許多，我們需要定義我們需要釋放目標的清單，當滑鼠釋放時，手工去檢查釋放的位置是否是在目標清單位置上，如果在，說明是釋放在目標位置上了。

<br />/*<br />All code from the previous example is needed with the exception<br />of the mouseUp function which is replaced below<br />*/<br /><br />var dropTargets = [];<br /><br />function addDropTarget(dropTarget){<br /> dropTargets.push(dropTarget);<br />}<br /><br />function mouseUp(ev){<br /> ev = ev || window.event;<br /> var mousePos = mouseCoords(ev);<br /><br /> for(var i=0; i<dropTargets.length; i++){<br /> var curTarget = dropTargets[i];<br /> var targPos = getPosition(curTarget);<br /> var targWidth = parseInt(curTarget.offsetWidth);<br /> var targHeight = parseInt(curTarget.offsetHeight);<br /><br /> if(<br /> (mousePos.x > targPos.x) &&<br /><br /> (mousePos.x < (targPos.x + targWidth)) &&<br /> (mousePos.y > targPos.y) &&<br /> (mousePos.y < (targPos.y + targHeight))){<br /> // dragObject was dropped onto curTarget!<br /> }<br /> }<br /><br /> dragObject = null;<br />}<br />
　　觀看範例

　　滑鼠釋放時會去取是否有 drop 屬性，如果存在，同時滑鼠指針還在 drop 的範圍內，執行 drop 操作。我們檢查滑鼠指針位置是否在目標範圍是用 (mousePos.x>targetPos.x)，而且還要符合條件 (mousePos.x<(targPos.x + targWidth))。如果所有的條件符合，說明指針確實在範圍內，可以執行 drop 指令了。

。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

今天因為要寫關於 JavaScript 捕捉滑鼠位置的程式，很意外的被我找到這篇文章，常常在很多網站看到大家用這樣的技術來做版面編排，但是都苦無方法來研究，看到了這篇文章讓我欣喜若狂，所以我擅自轉貼到我的筆記上，再找時間好好研究研究，為尊重原作者做以下申明︰ 原文︰How to Drag and Drop in JavaScript 作者︰Mark Kahn 譯者︰雪山老人 所有本文及範例檔案相關版權為以上作者所有。

用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚

捕捉滑鼠點擊

　　下次我們將知道滑鼠何時點擊與何時放開。如果我們跳過這一步，我們在做拖拽時將永遠不知道滑鼠移動上面時的動作，這將是惱人的與違反直覺的。

　　這裡有兩個函數幫助我們︰onmousedown 與 onmouseup 我們預先設定函數來接收 document.onmousemove，這樣看起來很象我們會穫取 document.onmousedown 與 document.onmouseup。但是當我們穫取 document.onmousedown 時，我們同時穫取了任何對象的點擊屬性如︰text、images、tables 等等。我們只想穫取那些需要拖拽的屬性，所以我們設定函數來穫取我們需要移動的對象。

　　觀看範例

移動一個元素

　　我們知道了怎麼捕捉滑鼠移動與點擊。剩下的就是移動元素了。首先，要確定一個明確的頁面位置，css 樣式錶要用'absolute'。設定元素絕對位置意味著我們可以用樣式錶的 .top 和 .left 來定位，可以用相對位置來定位了。我們將滑鼠的移動全部相對頁面 top-left，基於這點，我們可以進行下一步了。

　　當我們定義 item.style.position='absolute'，所有的操作都是改變 left 坐標與 top 坐標，然後它移動了。
<br />document.onmousemove = mouseMove;<br />document.onmouseup = mouseUp;<br /><br />var dragObject = null;<br />var mouseOffset = null;<br /><br />function getMouseOffset(target, ev){<br /> ev = ev || window.event;<br /><br /> var docPos = getPosition(target);<br /> var mousePos = mouseCoords(ev);<br /> return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};<br />}<br /><br />function getPosition(e){<br /> var left = 0;<br /> var top = 0;<br /><br /> while (e.offsetParent){<br /> left += e.offsetLeft;<br /> top += e.offsetTop;<br /> e = e.offsetParent;<br /> }<br /><br /> left += e.offsetLeft;<br /> top += e.offsetTop;<br /><br /> return {x:left, y:top};<br />}<br /><br />function mouseMove(ev){<br /> ev = ev || window.event;<br /> var mousePos = mouseCoords(ev);<br /><br /> if(dragObject){<br /> dragObject.style.position = 'absolute';<br /> dragObject.style.top = mousePos.y - mouseOffset.y;<br /> dragObject.style.left = mousePos.x - mouseOffset.x;<br /><br /> return false;<br /> }<br />}<br />function mouseUp(){<br /> dragObject = null;<br />}<br /><br />function makeDraggable(item){<br /> if(!item) return;<br /> item.onmousedown = function(ev){<br /> dragObject = this;<br /> mouseOffset = getMouseOffset(this, ev);<br /> return false;<br /> }<br />}<br />
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

今天因為要寫關於 JavaScript 捕捉滑鼠位置的程式，很意外的被我找到這篇文章，常常在很多網站看到大家用這樣的技術來做版面編排，但是都苦無方法來研究，看到了這篇文章讓我欣喜若狂，所以我擅自轉貼到我的筆記上，再找時間好好研究研究，為尊重原作者做以下申明︰ 原文︰How to Drag and Drop in JavaScript 作者︰Mark Kahn 譯者︰雪山老人 所有本文及範例檔案相關版權為以上作者所有。

用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚

　　JavaScript 的特點是 dom 的處理與網頁效果，大多數情況我們隻用到了這個語言的最簡單的功能，比如制作圖片輪播/網頁的 tab 等等，這篇文章將向你展示如何在自己的網頁上制作拖拽。

　　有很多理由讓你的網站加入拖拽功能，最簡單的一個是數據重組。例如：你有一個序列的內容讓用戶排序，用戶需要給每個條目進行輸入或者用 select 選擇，替代前面這個方法的就是拖拽。或許你的網站也需要一個用戶可以拖曳的導航窗口！那麼這些效果都是很簡單：因為你可以很容易的實現！

　　網頁上實現拖拽其實也不是很複雜。第一你需要知道滑鼠坐標，第二你需要知道用戶滑鼠點擊一個網頁元素並實現拖拽，最後我們要實現移動這個元素。

　　觀看範例

穫取滑鼠移動資訊

　　第一我們需要穫取滑鼠的坐標。我們加一個用戶函數到 document.onmousemove 就可以了︰
<br />document.onmousemove = mouseMove;<br /><br />function mouseMove(ev){<br /> ev = ev || window.event;<br /> var mousePos = mouseCoords(ev);<br />}<br /><br />function mouseCoords(ev){<br /> if(ev.pageX || ev.pageY){<br /> return {x:ev.pageX, y:ev.pageY};<br /> }<br /> return {<br /> x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,<br /> y:ev.clientY + document.body.scrollTop - document.body.clientTop<br /> };<br />}<br />
　　觀看範例

　　你首先要聲明一個 evnet 對象。不論何時你移動滑鼠／點擊／按鍵等等，會對應一個 event 的事件。在 Internet Explorer 裏 event 是全局變量，會被存儲在 window.event 裏。在firefox中，或者其他瀏覽器，event 事件會被相應的自定義函數穫取﹒當我們將 mouseMove 函數賦值於 document.onmousemove，mouseMove 會穫取滑鼠移動事件。

　　(ev = ev || window.event) 這樣讓 ev 在所有瀏覽器下穫取了 event 事件，在 Firefox 下 "||window.event" 將不起作用，因為 ev 已經有了賦值。在 MSIE 下 ev 是空的，所以 ev 將設定為 window.event。

　　因為我們在這篇文章中需要多次穫取滑鼠坐標，所以我們設計了 mouseCoords 這個函數，它隻包含了一個參數，就是 the event。

　　我們需要運行在 MSIE 與 Firefox 為首的其他瀏覽器下。Firefox 以 event.pageX 和 event.pageY 來代表滑鼠相應於文檔左上角的位置。如果你有一個 500*500 的窗口，而且你的滑鼠在正中間，那麼 paegX 和 pageY 將是 250，當你將頁面往下卷動 500px，那麼 pageY 將是 750。此時 pageX 不變，還是 250。

　　MSIE 和這個相反，MSIE 將 event.clientX 與 event.clientY 來代表滑鼠與 ie 窗口的位置，並不是文檔。當我們有一個 500*500 的窗口，滑鼠在正中間，那麼 clientX 與 clientY也 是 250，如果你垂直卷動窗口到任何位置，clientY 仍然是 250，因為相對 ie 窗口並沒有變化。想得到正確的結果，我們必須加入 scrollLeft 與 scrollTop 這兩個相對於文檔滑鼠位置的屬性。最後，由於 MSIE 並沒有 0,0 的文檔起始位置，因為通常會設定 2px 的邊框在周圍，邊框的寬度包含在 document.body.clientLeft 與 clientTop 這兩個屬性中，我們再加入這些到滑鼠的位置中。

　　很幸運，這樣 mouseCoords 函數就完成了，我們不再為坐標的事操心了。

。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

今天因為要寫關於 JavaScript 捕捉滑鼠位置的程式，很意外的被我找到這篇文章，常常在很多網站看到大家用這樣的技術來做版面編排，但是都苦無方法來研究，看到了這篇文章讓我欣喜若狂，所以我擅自轉貼到我的筆記上，再找時間好好研究研究，為尊重原作者做以下申明︰ 原文︰How to Drag and Drop in JavaScript 作者︰Mark Kahn 譯者︰雪山老人 所有本文及範例檔案相關版權為以上作者所有。

我的 AJAX 哪裡出錯了？

寫 AJAX 程式不會動是常常發生的事情，可是 JavaScript 到底哪裡出錯這就很頭大了，要如何有效的 Debug 以下是我的一個小方法。

寫關於 AJAX 程式大家最少要檢查兩個瀏覽器的執行結果『Firefox 及 IE』，JavaScript 程式 Firefox 執行正確在其他瀏覽器通常都沒問題，但是有時候在 IE 卻是不行的。Firefox 提供了 IE Tab 的擴充元件，在兩個瀏覽器切換非常方便，請參閱『讓 Firefox 可以直接使用 IE 來瀏覽網頁』。

Firefox 及 IE 也都提供了 JavaScript Debug 的擴充元件如下︰

Firefox︰
。Firebug
。JavaScript Debugger

IE︰
。Script Debugger
。Internet Explorer Developer Toolbar

PS. Firefox 的 Firebug 鏈結位置好像有問題，如果找不到請按此鏈結。

SyntaxHighlighter 語法高亮標記

這應該不需要做太多的介紹，這對於想在網頁上呈現一些程式碼，非常方便而且美觀，SyntaxHighlighter 組件可以至 Google Code 下載，使用方式很簡單，下載該組件後，在要使用的頁面上加入︰
<br /><link href="Styles/SyntaxHighlighter.css" rel="stylesheet" type="text/css" /><br /><script src="Scripts/shCore.js" type="text/javascript"></script><br /><script src="Scripts/shBrushXml.js" type="text/javascript"></script><br /><br /><script class="javascript"><br /><!--<br /> dp.SyntaxHighlighter.HighlightAll('code'); <br />--><br /></script><br />
其中 js 檔案要含入 shCore.js 後，再含入 shBrushXXX.js 其中 XXX 為要使用的程式語法，如 Xml、Php 等。接下來就是要一行起始指令︰
dp.SyntaxHighlighter.HighlightAll('code');
其中的 'code' 為要 highlight 區域 (textarea) 的名稱。在頁面使用範例如下︰
<br /><textarea name="code" class="xml"><br /> <font color="#FF0000" size="3"><br /> <b>這是範例</b><br /> </font><br /></textarea><br />
其中的 name 就指定為 code 即可, 而 class 則為要 highlight 的程式語法名稱對應的 class 如 xml。
如希望顯示預設先不展開，可以這樣下︰
<br /><textarea name="code" class="xml:collapse"><br /> <font color="#FF0000" size="3"><br /> <b>這是範例</b><br /> </font><br /></textarea><br />