GIS/基本:修訂版本之間的差異
出自六年制學程
(新頁面: 分類:六年制學程/課程 ===何謂地理資訊系統=== GIS是「地理資訊系統」(Geographic Information System)的縮寫。 是指在地圖上加上數據或訊息。...) |
(→基本 DIV) |
||
(未顯示同用戶所作出之1次版本) | |||
第 1 行: | 第 1 行: | ||
− | [[分類: | + | [[分類:GIS]] |
===何謂地理資訊系統=== | ===何謂地理資訊系統=== | ||
GIS是「地理資訊系統」(Geographic Information System)的縮寫。 | GIS是「地理資訊系統」(Geographic Information System)的縮寫。 | ||
第 8 行: | 第 8 行: | ||
===基本 DIV=== | ===基本 DIV=== | ||
<pre> | <pre> | ||
+ | <meta content='text/html;charset=utf-8' http-equiv='Content-Type'> | ||
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> | <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> | ||
− | <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/ | + | <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script> |
− | <script type='text/javascript' src='http://www.pittss.lv/jquery/gomap/js/jquery.gomap-1.3. | + | <script type='text/javascript' src='http://www.pittss.lv/jquery/gomap/js/jquery.gomap-1.3.3.min.js'></script> |
<script> | <script> | ||
$(function(){ | $(function(){ | ||
第 20 行: | 第 21 行: | ||
<div align=center id='map' style='height:550px; width:900px;'>六年制學程</div> | <div align=center id='map' style='height:550px; width:900px;'>六年制學程</div> | ||
</pre> | </pre> | ||
+ | |||
===三個載入工具=== | ===三個載入工具=== | ||
====Google Maps JavaScript API==== | ====Google Maps JavaScript API==== |
2017年12月12日 (二) 08:23的最新修訂版本
目錄
何謂地理資訊系統
GIS是「地理資訊系統」(Geographic Information System)的縮寫。
是指在地圖上加上數據或訊息。
六年制學程使用的 GIS 是以 google map 為基礎,運用 javascript 語言表現在 HTML 中。後端伺服器是使用 MySQL+PHP 。
基本 DIV
<meta content='text/html;charset=utf-8' http-equiv='Content-Type'> <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script> <script type='text/javascript' src='http://www.pittss.lv/jquery/gomap/js/jquery.gomap-1.3.3.min.js'></script> <script> $(function(){ $('#map').goMap({ ……… }); }); </script> <div align=center id='map' style='height:550px; width:900px;'>六年制學程</div>
三個載入工具
Google Maps JavaScript API
Google AJAX Libraries API
- 公開的 JavaScript Library 儲存庫。
- Google 透過他們的主機來提供你 JavaScript Library (或是 AJAX Library) 的檔案。
- 使用者第一次瀏覽到某個使用 Google jQuery 網站時,會下載並且 cache 在電腦內,當使用者去到另一個網站也是使用到 Google 所提供的 jQuery,則不需要再重複下載。這樣可以加快網頁的呈現速度,也就是公開的檔案儲存庫的優點之一。
- Google AJAX Libraries API 在效能上的優點:
- Cache - 已針對主機做了正確的設定,下載過一次之後,檔案會 Cache 在使用者的電腦。
- Gzip - 如果使用者的瀏覽器支援 Gzip 壓縮,則 Google 就會送出壓縮過的資料,減少傳輸量。
- 有提供最小化的版本,也就是 JavaScript 內的空白、換行、程式變數都經過處理,讓檔案最小化。
- Google 有自家的 CDN (內容散佈網路),會由最接近使用者的主機送出檔案,讓傳輸速度加快。
- 主機都很快。
- 使用者在不同網站之間瀏覽也不需重複下載相同的檔案。
- 傳送檔案時不會傳送多餘的 header 資訊,例如 cookie,這樣可以減少傳輸量,省下珍貴的頻寬。
- Google 是透過一個簡單的 API 來提供檔案的,而這個 API 目前最主要的目的是讓你可以輕易地選擇你要使用的檔案版本,例如:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/版本號/jquery.min.js'></script>
取得原始碼
使用 Google AJAX API Loader 的 google.load() 來把檔案讀進來,以下這個範例是使用 google.load() 來載入 jQuery 並且在網頁載入完成後使用 jQuery 的 get() 讀取遠端的檔案:
<script src="http://www.google.com/jsapi"></script> <script> // 載入 jQuery google.load("jquery", "1"); // 網頁載入完成後,使用 jQuery 函數 google.setOnLoadCallback(function() { $.get("http://jsgears.com/index.php", function (data) { // 處理取得的 data }); }); </script>
google.load() 的第一個參數是 library 的名稱,目前支援的 libraries 包含了:
- jquery
- prototype
- scriptaculous
- mootools
- dojo
第二參數則是指定版本,版本的指定方式很靈活,假設版本有 1.8.2、1.8.4 以及 1.9.1 三種,你可以指定 1.8.2 明確地表示要使用 1.8.2 這個版本,也可以指定 1.8 表示要使用 1.8.x 的最新版,也就是 1.8.4,甚至你也可以指定 1 表示使用 1.x 的最新版,即為 1.9.1。這種版本的指定方式也適用於指定完整路徑的引用方式,例如:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
此外,預設送出來的檔案都是最小化的版本,如果你需要原始編排整齊可讀的程式碼,可以這樣做:
google.load("jquery", "1.2", {uncompressed:true});
目前 Google AJAX Libraries API 所提供的檔案相對的是比較少,但是速度和穩定性卻是相對的比較高,未來可預期的是還會有更多的 library 加入到 Google AJAX Libraries。
參考資料
- 完整的文件:http://code.google.com/apis/ajaxlibs/documentation/
- 目前 AOL 也有提供 Dojo,在這裡:http://dev.aol.com/dojo
- Yahoo 也用自家的 CDN 提供 YUI,在這裡:http://developer.yahoo.com/yui/articles/hosting/