新版的(v3) Google Map API已經不需要再申請api key了，所以應用起來我想會更方便(不用api key我想也是未來趨勢)
學習任何api之前，一定要先從使用者端來了解整個應用程式的架構，畢竟應用程式不是你寫的，你得先明白該程式能不能符合你的需求，再進一步去了解api的code來應用到自已的網站中，而google的api提供的通常有普通版本(免費)和商業版本(付費)，這邊dnowba只紀錄普通版本
&地理定位問題：
在使用google map來追蹤路徑的時候我們會用到地理定位(用ip來紀錄你的定位，不是gps定位器之類的感測裝置)，所以在使用前都需要檢測，程式碼如下
var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag = new Boolean();
function initialize() {
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Try W3C Geolocation (Preferred)
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
// Try Google Gears Geolocation
} else if (google.gears) {
browserSupportFlag = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeoLocation(browserSupportFlag);
});
// Browser doesn't support Geolocation
} else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed.");
initialLocation = newyork;
} else {
alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
initialLocation = siberia;
}
map.setCenter(initialLocation);
}
}
行13：是檢查瀏覽器是否符合W3C的地理定位標準，如果沒有則使用google gears來定位
行22：是利用google gears 地理定位的API
行32：當上面二個都無法使用時，顯示「定位失敗」、「無法使用定位」的文字訊息並放把畫面移到到所定義的坐標
&感測器(如gps)定位：
在使用google的api使我們還要說明是否使用感測器，程式碼是放在<script> 標籤中來呼叫不同的js，這個地方dnowba身上沒有gps的器材無法比較差異就是。不過不管有沒有要使用感測裝置，都要設置是true或false
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
&基本參數：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
行1：宣告DOCTYPE的樣式，不宣告的話會讓網頁無法正確顯示 CSS 的正確效果，官方文件是說這行是宣告支援HTML 5，不過我的認知是應該宣告成類似「<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">」這樣的才算是，不然應該會被當作是非標準模式來顯示，另外就是完整的支援HTML 5規範目前是各家瀏覽器努力的目標(IE除外…只能說有個性)，就算是GOOGLE自家的CHROME目前完成度也僅7成(預計2012年才會大放異彩)，後來查了一下，了解了在HTML 5的規格書裡是這樣表示的沒錯，比4以前簡化了很多。基本的格式是
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>標題</title>
</head>
<body>
<!-- 內容 ... -->
</body>
</html>
行4的meta標記就我認知是為了解決移動型瀏覽器的問題所產生的(簡而言之就是現在3g手機使用瀏覽器本身的解析度就和桌上的制定不同，還有有些手機可以翻轉畫面的…這些問題)，initial-scale 則表示預設的畫面是以多少倍的 viewport 來顯示，user-scalable 的值為 0 或 1(no或yes)，用來表示使用者是否能自行調整畫面的 viewport 倍率。
行15是定義初始的地圖坐標
行17是縮放級數，範圍是1-13
行18是置中位置，這裡用上一個定義參數latlng。
行19是顯示模式，有ROADMAP(道路)、SATELLITE(衛星)、HYBRID(混合)、TERRAIN(地形)模式可修改
行28是GOOGLE MAP要顯示在網頁上的DOM元素，這裡用<DIV>標記來包住他，id是map_canvas，可以另外再設定他的style。
鑑於google api教學文件都是英文的，所以在這裡紀錄一下學習筆記方便自已使用，dnowba不是專業IT，只能寫下自已稍了解的東西，可能也會有一些錯誤認知，歡迎指正。
沒有留言:
張貼留言