html5的地理定位和jquery plugin- tinyMaps

張貼者： 日期：

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

view plaincopy to clipboardprint?
  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，就可以直接使用了。
view plaincopy to clipboardprint?
  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

留言

張貼留言