html5的地理定位和jquery plugin- tinyMaps
html5可以支援地理定位，可以直接使用geolocation的api去取得目前的位置。
- if(window.navigator.geolocation){
- var geolocation=window.navigator.geolocation;
- geolocation.getCurrentPosition(getPositionSuccess);
- }else{
- alert("你的瀏覽器不支援地理定位");
- }
- function getPositionSuccess(position){
- lat=position.coords.latitude;
- lon=position.coords.longitude;
- alert("經度: "lat+", 緯度: "+lon);
- }
而如果希望可以在地圖上秀出標示的點，可以使用google map api，網路上也有一些方便使用的jQuery plugin，比如這個tinyMap
下載後引入jquery.js、googlemaps api跟這隻plugin，就可以直接使用了。
- $('#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
留言