Posts Tagged ‘Javascript’
Google Maps API運用經驗
星期二, 三月 11th, 2008因公司內幾台車頭有安裝GPS定位的設備，就來玩看看Google Maps API，能不能協助讓我更輕易的掌握各台車頭的行蹤:P
該設備回傳到資料庫的定位格式為WGS84經緯度(E/N)，為順利套用到GMap，需先轉為WGS84 TM2座標。
換算方式
E = 12047.883 = 120 + (47.883/60)
N = 2435.245 = 24 + (35.245/60)
得
X = 120.79805
Y = 24.587416666667
※ 使用Google Maps API的網頁編碼需為UTF-8（若使用BIG5編碼，於IE會無法顯示，原因不明）
網頁開頭宣告DOCTYPE
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
在head內引入Google Maps API的Javascript檔，此處將以v2版為例。
key值請前往Sign Up for the Google Maps API申請即可。
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAQfRFdSPVX2zgzzcm-u8wzhR73b70vbYnqlQzPoG6vMTmUQULnBR4BZoRIhZ47CWMvpmgGocSL8S51A" type="text/javascript"></script>
為避免瀏覽器尚未載入API就先跑Script造成錯誤，需於body內設定onload，另於離開時呼叫GUnload()釋放記憶體。
<body onload="initialize()" onunload="GUnload()">
增加地圖顯示的圖層，可隨意指定大小。
<div id="map" style="width:100%;height:500px;margin:0 auto;">
接下來就是主角上場...
<script type="text/javascript">
function initialize() {
// 檢查瀏覽器是否可正確執行
if (GBrowserIsCompatible()) {
// 指定GMap使用的圖層
var map = new GMap2(document.getElementById("map"));
// 地圖控制列
map.addControl(new GLargeMapControl()); // 左側控制列
map.addControl(new GMapTypeControl()); // 右上控制列
// 座標
var point = new GLatLng(24.587416666667, 120.79805);
// 座標x/y於API v1/v2的擺放位址是相反的
map.setCenter(point, 13); // 放大倍率
function initialize() {
// 檢查瀏覽器是否可正確執行
if (GBrowserIsCompatible()) {
// 指定GMap使用的圖層
var map = new GMap2(document.getElementById("map"));
// 地圖控制列
map.addControl(new GLargeMapControl()); // 左側控制列
map.addControl(new GMapTypeControl()); // 右上控制列
// 座標
var point = new GLatLng(24.587416666667, 120.79805);
// 座標x/y於API v1/v2的擺放位址是相反的
map.setCenter(point, 13); // 放大倍率
// 自訂圖標
var TruckIcon = new GIcon(G_DEFAULT_ICON);
TruckIcon.image = "./truck.png";
// 自訂圖標大小
TruckIcon.iconSize = new GSize(32, 22);
markerOptions = { icon:TruckIcon };
// 設定座標點使用自訂圖標
var marker = new GMarker(point, markerOptions);
map.addOverlay(marker);
// 訊息
map.openInfoWindow(map.getCenter(), document.createTextNode("顯示於地圖中央的訊息"));
// 行車軌跡、顏色、線粗細設定（可定義多個座標點）
var polyline = new GPolyline([new GLatLng(24.524333333333,120.726366666667),
new GLatLng(24.528066666667,120.729766666667),
new GLatLng(24.531316666667,120.733283333333),
new GLatLng(24.534733333333,120.73665),
new GLatLng(24.538466666667,120.739483333333),
new GLatLng(24.542083333333,120.741733333333),
new GLatLng(24.5458,120.74395),
new GLatLng(24.5495,120.746433333333),
new GLatLng(24.5529,120.749216666667)
], "#ff0000", 6);
map.addOverlay(polyline);
} else {
alert("您的瀏覽器不支援Google Maps！！");
}
}
</script>
※ 以上方式可適用於Firefox/Opera/IE6等...主流瀏覽器，IE5.5還是不行...但應該很少人使用IE5.5了吧=_=\