GOOGLE MAP API的使用
在網頁上內嵌GOOGLE MAP好像也不是一件很難的事情，
就先到Google map 然後指定地點，複製他產生的<iframe>標籤或是href貼到網頁程式碼就可以了。 不過我現在看的這本書是在講如何在網頁中內嵌地圖的API
(以下說明來自GOOGLE MAP API說明)
Google Maps API 提供開發人員數種將 Google 地圖嵌入網頁的方式，可以簡單使用或再自行大幅修改。我們目前提供數種 API：
1.Google Maps Javascript API
2.Google Maps API for Flash
3.Google Static Maps API
這些 API 可以單獨使用或加以組合，滿足您的各種需求。
如果您是經營企業或商業網站的使用者，您可能也想瞭解 Google Maps API Premier。
可以到官網去參考他的使用方式。http://code.google.com/intl/zh-TW/apis/maps/faq.html#whatis
1.Google Maps Javascript API
就是用javascript內嵌google map API到網頁裡。
目前已經發展到第三版，並且支援行動裝置。
顧名思義第二種API for Flash就是用actionscript API
在網頁中顯示google map API的步驟 :
更多詳情請見 Google Maps Javascript API 第 3 版地方資訊程式庫 (實驗性)
1. 在<head>標籤裡內嵌 Maps JavaScript API -->
3. 設定相關選項 -->
var latlng 設定經緯度
var myOptions 設定縮放比例.中心的經緯.顯示類型
var map 定義單一地圖
4. 載入 。
詳見下方說明
<script type="text/javascript" src="../jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<div id="mymap" style="width:500px; height:500px;"></div>
3. 設定相關選項 -->
var latlng 設定經緯度
var myOptions 設定縮放比例.中心的經緯.顯示類型
var map 定義單一地圖
4. 載入 。
詳見下方說明
說明:
1. 在<head>標籤裡內嵌 Maps JavaScript API
首先必須內嵌這個javascript的檔案:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true_or_false"></script>
請不要直接把這一整具貼上去html文件裡，因為你必須去設定後面的sensor
，否則會出現錯誤。
後面所帶的 sensor=true_or_false
這裡的sensor 顧名思義就是感應器，例如GPS定位器
如果你希望在行動裝置去判斷使用者的位置
那請將sensor設定為true。還有很重要的一點，來自於 google網站說明:
請注意，即使您的應用程式沒有使用位置感應器，您仍必須設定 sensor 參數 (在此情況下，請設定為 false)。
2. 建立一<div>標籤顯示google地圖
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script><!-- 匯入jquery-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true"></script>
</head>
<body>
<!-- 測試一個區塊-->
<div style="width:500px;height:500px;background-color:green">綠綠的</div>
</body>
</html>
3. 設定相關選項
這裡所說的相關選項只是地圖的一些設定。 我看了一下官方的說明文件，這裡的選項不外乎就是一些你必須去初始畫的東西。比方說，你必須在使用地圖的時候一開始就要去設定最初的經緯度是多少。 看一下google的地圖選項說明: 「為了初始化地圖，我們會先建立 Map options 物件以納入地圖初始化變數。我們不會建構這個物件，而會以物件實字形式建立這個物件。因為我們想將地圖中心鎖定在特定的點，所以也會建立 latlng 值來存放這個位置」
用latlng存放這個位址就是這樣: (jquery寫法) <script> $(document).ready(function(){ var latlng = new google.maps.Latlng(22.732709,120.287507); }); </script>
map option 幾個常用的就是zoom .center mapTypeld 。 zoom: 地圖顯示的比例，總共有18個 從0~17 center: 顧名思義就是地圖中心。值就是經緯度設定的 latlng mayTypeld : 請看google說明
mapTypeId 支援的類型如下：
· SATELLITE 顯示圖形地圖方塊。 · HYBRID 會顯示圖形地圖方塊和特殊圖徵 (道路、城市名稱) 地圖方塊圖層的混合圖。 · TERRAIN 會顯示實際起伏的地圖方塊，以展現地形高度和水域圖徵 (山嶽、河流等)。
*第 3 版沒有預設地圖類型。您必須具體設定初始地圖類型
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
|
4. 載入
載入應該是最容易忘記的步驟吧xd 以我來說是這樣
前面弄了老半天狂按F5也不會有結果的xdd
載入地圖的話必須建立這個物件 (一樣貼自於Google)
google.maps.Map - 基本物件
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
此類別的物件會定義網頁上的單一地圖 (這個類別可以讓您建立實例，每個物件會在網頁上定義個別的地圖)。我們使用 JavaScript new 運算子來新增此類別的實例。
建立新的地圖實例時，您必須在網頁中指定 HTML 元素 <div> 做為地圖的容器。
就是說 getElementById("map_canvas")
裡面的map_canvas原本是只建立一個div物件去設定他的canvas
不過我這裡是直接設定div的style長寬
無論如何這裡的map_canvas是要填入div 的id名稱。
測試
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
var latlng = new google.maps.LatLng(22.732709,120.287507);
//變數是小寫latlng， new後面的LatLng 的L是大寫!!!
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//建立google.maps.Map - 基本物件，定義網頁上的單一地圖
var map = new google.maps.Map(document.getElementById("mymap"),myOptions);
});
</script>
</head>
<body>
<!-- 測試一個區塊-->
<div id="mymap" style="width:500px; height:500px;"></div>
</body>
</html>
顯示結果
參考書目 :
- jQuery 網頁設計範例教學 - 德瑞工作室- 松崗出版
- google API 大全
沒有留言:
張貼留言
若你看的文章，時間太久遠的問題就別問了，因為我應該也忘了... XD