2012年3月6日 星期二

GOOGLE MAP 的API使用(Javascript API)


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 -->
<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>
2. 建立一<div>標籤顯示google地圖  -->

<div id="mymap" style="width:500px; height:500px;"></div>


3. 設定相關選項 -->
var latlng 設定經緯度
var myOptions  設定縮放比例.中心的經緯.顯示類型
var map 定義單一地圖
4. 載入 。
詳見下方說明



說明: 
1. 在<head>標籤裡內嵌 Maps JavaScript API

根據google的說明 
 首先必須內嵌這個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 值來存放這個位置」

  • 緯度是 lat (變數)
  • 經度是 lng(變數)


用latlng存放這個位址就是這樣: (jquery寫法)
 <script>
 $(document).ready(function(){
  var latlng = new google.maps.Latlng(22.732709,120.287507);
 });
</script>


  • Map options物件的建立:


map option 幾個常用的就是zoom .center mapTypeld 。
zoom: 地圖顯示的比例,總共有18個 從0~17
center: 顧名思義就是地圖中心。值就是經緯度設定的 latlng
mayTypeld : 請看google說明




mapTypeId 支援的類型如下:
·         ROADMAP 顯示 Google 地圖的正常、預設 2D 地圖方塊。
·         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

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...