2006/01/18

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.設定→格式→啟用浮動對齊→否


這個範本還可以加強的還很多,例如可以做分類標籤來顯示紅點,標示旅館或是餐廳,或是店家等等。拿座標來計算,把這些紅點依照時間來連出線來,計算密度或是面積,總之,可以想出的東西還不少呢!