<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>景點路線規劃-由自己GPS位置到目的地(必須在手機實機測試)</title>
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css">
<script src="jquery.mobile-1.4.2/jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>

 

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script language="Javascript">
$(function(){
        getLocation();     // 先取得目前的緯、經度
});

 

function getLocation() { // 取得目前的定位點
        navigator.geolocation.getCurrentPosition(locSuccess, locFail, {enableHighAccuracy:true});
}

function locSuccess(position) {  // 執行成功會取得目前的定位點
        CurrentGeoPoint.lat=position.coords.latitude;
        CurrentGeoPoint.lng=position.coords.longitude;
    return true;
}

function locFail(error){     // 執行失敗
        var message="無法取得 GPS 位置！";
        try{
                navigator.notification.alert(messqage, null, "Geolocation");
        }catch(e){
                alert(message);
        }
}

 

var CurrentGeoPoint={lat:null, lng:null };    // 目前的 GPS 定位點
var school = new Array(); //一維陣列 array
function Route(){ 
school[0]={name:"台南大學", latitude:22.983932, longitude:120.207268};
school[1]={name:"成功大學", latitude:22.998677, longitude:120.216122};
school[2]={name:"首府大學", latitude:23.193101, longitude:120.268471};
school[3]={name:"南榮科大", latitude:23.323728, longitude:120.274910};            
getLocation();
// 取得起始點的 GPS 位置
var lat1 = CurrentGeoPoint.lat;
var lng1 = CurrentGeoPoint.lng;

// 取得終點的 GPS 位置
var lat2 = school[document.getElementById("selectmenu").selectedIndex].latitude;
var lng2 = school[document.getElementById("selectmenu").selectedIndex].longitude; 

window.open("http://maps.google.com/maps?f=d&saddr=" + lat1 + "," + lng1 + "&daddr=" + lat2 +","+ lng2+ "&hl=zh-TW&ie=UTF8"); 

}

</script>

 

</head>

<body>
<div data-role="page" id="pageHome">
<div data-role="content">

<p>
<div data-role="fieldcontain">
<p>
<label for="selectmenu" class="select">目的地：</label>
<select name="selectmenu" id="selectmenu">
<option value="0" selected="selected">台南大學</option>
<option value="1">成功大學</option>
<option value="2">首府大學</option>
<option value="3">南榮科大</option>
</select>
&nbsp;    </p>

    </p>
<p>&nbsp;
<button data-icon="search" onclick="Route()" >由目前GPS位置到目的地的路線規劃</button>
</p>
</div>
</p>

  </div>

</div>
</div>

</body>
</html>