2012年5月23日 星期三

html5的地理定位和jquery plugin- tinyMaps


html5可以支援地理定位,可以直接使用geolocation的api去取得目前的位置。

  1. if(window.navigator.geolocation){   
  2.     var geolocation=window.navigator.geolocation;   
  3.     geolocation.getCurrentPosition(getPositionSuccess);   
  4. }else{   
  5.     alert("你的瀏覽器不支援地理定位");   
  6. }   
  7.   
  8. function getPositionSuccess(position){   
  9.     lat=position.coords.latitude;   
  10.     lon=position.coords.longitude;   
  11.     alert("經度: "lat+", 緯度: "+lon);   
  12. }  

而如果希望可以在地圖上秀出標示的點,可以使用google map api,網路上也有一些方便使用的jQuery plugin,比如這個tinyMap

下載後引入jquery.js、googlemaps api跟這隻plugin,就可以直接使用了。
  1. $('#map').tinyMap();  

另外有許多參數可以設定
center: 地圖置中的座標或地址,若為座標請使用 JSON: {x: 'lat', y: 'lng'},地址則直接輸入。
control: 顯示地圖類型選單 (Boolean) /* 預設:true */
draggable: 是否可拖曳地圖 (Boolean) /* 預設: true */
keyboardShortcuts: 是否支援鍵盤操作 (Boolean) /* 預設: true */
mapTypeId: 預設地圖類型 (String) /* 選項:default, hybrid(混合), roadmap, satellite(衛星) 預設:roadmap */
mapTypeControl: 是否可切換地圖類型 (Boolean) /* 預設:true */
navigationControl: 是否顯示縮放控制列 (Boolean) /* 預設:true */
scaleControl: 是否顯示比例尺 (Boolean) /* 預設:true */
scrollwheel: 是否支援滑鼠滾輪 (Boolean) /* 預設:true */
zoom: 顯示地圖縮放等級 (Integer) /* 預設:13 */
marker: 標記群組 (JSON):
[{addr: '標記地址或座標', text: '標記說明', icon: '圖示 URL'}]
地址: [{addr: '台北市忠孝東路', text: '標記說明', icon: '圖示 URL', label: '文字層,不填寫或未設定則不顯示', css: 'Css 樣式名稱'}]
座標: [{addr: '00.0000, 00.0000', text: '標記說明', icon: '圖示 URL'}]
direction: 路徑規劃 (JSON):
[{from: '起點地址', to: '目的地址', travel: '交通類型:DRIVING|WALKING|BICYCLING'}]

Demo
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...