Blogger功能再加強(VI):標示地圖位置的部落格分類：部落格、網路
分類：
部落格
Google Maps 的 SDK出來大概快一年了，很想用他們寫好的元件來應用，一直忙碌，最近才把這個應用化作實際的應用。
http://tripmap.blogspot.com
http://tripwriter.blogspot.com/2005/12/blog-post_19.html
可以先點看以上的例子，改變一下瀏覽器的視窗大小，然後壓住滑鼠拖曳地圖，雙擊某個地點會移動到中心點，或是點一下小紅點會出現一個小的提示視窗，中間要克服的小問題還不少，我先表列在下方所需要了解的知識，然後再說明一下會出現的困難，其實，很多事情要做過後才知道困難在哪裡，光用想的也想不周全。
為什麼要做這個，除了＂爽＂之外，我想應用的範圍可以在旅行、美食、生態保育、交通、公共安全等等，可以用的地方太多了，我就把這個範本分享給大家，若要使用請來此留言一聲，不要應用在非法的地方就好。
必須先了解的技術：
1. HTML/CSS
2. Javascript 以及事件的 callback 方式
3. Blogger.com 的範本運作結構
4. Google Maps 網站的申請 http://www.google.com/apis/maps/signup.html
5. 基本的英文閱讀能力
先把範本貼在這裡，然後我用很簡單的方式說明，如果看不懂的話，請大家留言討論。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<$BlogMetaData$>
<blogger><ItemPage><meta http-equiv="refresh" content="0;URL=<BlogItemURL><$BlogItemURL$></BlogItemURL>"></ItemPage></blogger>
<style type="text/css">
#b-navbar { height:0px; visibility:hidden; display:none}
</style>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAwWJEqqG6jAyc8JO525fkAhRJdXEFphur6YpSasUgXTLfk7-jChQNO-51KIyTPcmUrBAPXsEG_-i9-Q" type="text/javascript"></script>
<title><$BlogPageTitle$></title>
<style type="text/css">
.title
{
width:260px;
font:100%/1.3em "標楷體","Trebuchet MS";
color:#333;
}
.title h6 { display:none; }
.title a { text-decoration:none; color:#222; }
.title a:hover { color:#000; }
.summary
{
color:#343;
width:260px;
font:80%/1.1em "Trebuchet MS",Trebuchet;
}
</style>
</head>
<body onresize="resizeMap()">
<div id="map" style="width: 100%; height:512px"></div>
<script type="text/javascript">
function e(id)
{
return document.getElementById(id);
}
function getWindowHeight()
{
if (window.self && self.innerHeight)
{
return self.innerHeight;
}
if (document.documentElement && document.documentElement.clientHeight)
{
return document.documentElement.clientHeight;
}
return 0;
}
function resizeMap()
{
var offset = 0;
for (var elem = e("map"); elem != null; elem = elem.offsetParent)
{offset += elem.offsetTop;}
var windowHeight = getWindowHeight();
var height = windowHeight - offset;
if (height >= 0)
{
e("map").style.height = height + "px";
map.onResize();
}
}
function a_round(xx)
{
return Math.round(xx*10000)/10000;
}
function a_showPoint(overlay, point)
{
if (point)
{
var center = map.getCenterLatLng();
var zooml= map.getZoomLevel();
var szStr = '中心點:X=' + a_round(center.x) + ',Y=' + a_round(center.y) + ',Z=' + zooml +',滑鼠點:X=' + a_round(point.x) +',Y=' + a_round(point.y);
var szStrXY= '",' + a_round(point.x) + ',' + a_round(point.y);
window.status = szStr;
if (window.clipboardData)
{
window.clipboardData.setData("Text", szStrXY);
}
}
}
function a_getURLtag(szParamName)
{
var szURL = window.location.href.toString();
var iTag = szURL.indexOf(szParamName);
if (-1==iTag)
return '';
var iTag2=szURL.indexOf('&',iTag+2);
if (iTag2 == -1)
return '';
return decodeURI(szURL.substring(iTag+2,iTag2));
}
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var X=parseFloat(a_getURLtag('x='));
var Y=parseFloat(a_getURLtag('y='));
var Z=parseInt(a_getURLtag('z='));
if (isNaN(Y)){ X=0; Y=30;}
if (isNaN(Z)) Z=15;
map.centerAndZoom(new GPoint(X,Y), Z);
map.setMapType(G_SATELLITE_TYPE);
GEvent.addListener(map, 'click', a_showPoint);
resizeMap();
function createMarker(szTitle,szLink,x,y,szContent)
{
var marker = new GMarker(new GPoint(x,y), icon);
var szText = '<div class=title><a href=' + szLink + ' target=_blank>' + szTitle + '</a></div><div class=summary>' + szContent + '</div>';
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(szText);});
map.addOverlay(marker);
}
<Blogger>
<MainPage>createMarker("<$BlogItemTitle$>",<BlogItemURL><$BlogItemURL$></BlogItemURL>,"<$BlogItemBody$>");</MainPage>
</Blogger>
</script>
</body>
</html>
把 xxx.blogspot.com 最上方的 NavBar 拿掉：為什麼要拿掉這個東西呢？因為我的應用是想在原來的部落格採用<IFRAME>的方式含入，有了那個 NavBar 在動態大小的時候會不漂亮，這個的關鍵是 #b-navbar 這個字眼，請大家自行看上方的原始範本即可。
google maps SDK 只能在同一個網站路徑（PATH）下使用，所以想當然爾是利用<MainPage>來做，然後把一個小紅點當成一篇文章來規劃，所以要使用前請先註冊一個部落格的網址，有了網址之後再去 Google Maps 的網站申請一個 Key，注意上方範本紅字的部份，更新那段程式碼即可。
<div> 這個 HTML 語法有支援寬度的 100%，也就是視窗改變大小的時候會隨著改變，但是高度就沒有了支援了，所以利用 onResize 這個事件驅動，改變 div 的高度，但改變高度後注意要再通知 GMap 這個元件，不然雙擊滑鼠的位置時會對不到中間的位置。這樣有什麼好處呢？就是在 IFRAME 含入這個視窗的時候可以動態的指定大小，隨別人高興調整，填滿整個視窗。
若想設定起始的位置，可以用網址傳入，然後程式讀入後直接跳到該位置，關鍵點在 a_getURLtag 這個函式。
新增文章座標點要標示的位置我放在 link 那個欄位，算我偷懶，規格是
"http://.......",x,y
記得要加半形的雙引號，可以在你要標示的位置點一下滑鼠，應該可以發現瀏覽器的statusbar 會顯示一串數字，這些就是座標，為了方便剪貼，我把點擊的座標會剪貼到剪貼簿裏面。
請要特別注意一點，就是標題、link還有內文，都不要有單引號、雙引號或是逗號這些符號，除了剛剛提的link 的規格外，因為這些都是用 Javascript 來套版形，有了這些符號就會誤判。當然標題依照我自己的慣例還是用<h6></h6>這個把分類標籤夾住，當然目前是沒有作用，等未來要拿來做分類的時候可以再寫程式補強。
而這個部落格的概念比較像網摘，是讓別的網站外掛進來的，並不是真的把文章放在這裡，所以之前 BlogThis! 的功能我還是放在這裡，請把下面這段 javascript程式碼放在我的最愛，或是連結工具列上，看到要標示地圖的網址，就點下 BlogThis！，然後配合顯示地圖的座標把X,Y值填上即可。
javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');d.location.href='http://new.blogger.com/blog_this.pyra?t='+encodeURIComponent(t)+'&u='+escape(d.location.href)+'&n='+encodeURIComponent(d.title);
記得要在這個新的網摘專用部落格做幾個設定
1.設定→基本→顯示您所有 Blog 的 [撰寫] 模式？→否
2.設定→格式→顯示→999篇文章
3.設定→格式→編碼→UTF-8
4.設定→格式→轉換斷行符號→否
5.設定→格式→顯示標題欄位→是
6.設定→格式→顯示連結欄位→是
7.設定→格式→啟用浮動對齊→否
這個範本還可以加強的還很多，例如可以做分類標籤來顯示紅點，標示旅館或是餐廳，或是店家等等。拿座標來計算，把這些紅點依照時間來連出線來，計算密度或是面積，總之，可以想出的東西還不少呢！
