<!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 href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
#googleMap {
margin: 0 auto;
width: 640px;
height: 480px;
border: 5px solid #FFF;
border-radius: 5px;
box-shadow: 2px 2px 2px 2px #666;
}
</style>
<script language="Javascript">
//###############################################################
function show1()
{
// 以該點為中心顯示地圖
var map01 = document.getElementById("googleMap");
// 取得目前定位點（可以先到google地圖找到目的地的經緯度（按滑鼠右鍵→這是哪裡，即可取得）
var latlng1 = new google.maps.LatLng(25.017500, 121.539561);
var gmap = new google.maps.Map(map01, {
zoom:14,
center: latlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// 建立地標
var marker=new google.maps.Marker({
position: latlng1,
icon:"images/myicon.png",
map: gmap,
title: "台灣大學"
});
// 觸碰地標
google.maps.event.addListener(marker, "click", function(event) {
var infowindow = new google.maps.InfoWindow({
content: '<div>' + "台灣大學校本部" + "</div>"
});
infowindow.open(gmap,marker);
})
}//
function show2()
{
// 以該點為中心顯示地圖
var map01 = document.getElementById("googleMap");
// 取得目前定位點（可以先到google地圖找到目的地的經緯度（按滑鼠右鍵→這是哪裡，即可取得）
var latlng1 = new google.maps.LatLng(23.193032, 120.268354);
var gmap = new google.maps.Map(map01, {
zoom:14,
center: latlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// 建立地標
var marker=new google.maps.Marker({
position: latlng1,
icon:"images/myicon.png",
map: gmap,
title: "首府大學"
});
// 觸碰地標
google.maps.event.addListener(marker, "click", function(event) {
var infowindow = new google.maps.InfoWindow({
content: '<div>' + "首府大學校本部" + "</div>"
});
infowindow.open(gmap,marker);
})
}//
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>頁面標題名稱</h1>
</div>
<div data-role="content">
<input name="b1" type="button" onclick="show1()" value="地圖1" />
<input name="b2" type="button" onclick="show2()" value="地圖2" />
<div data-role="content" id="googleMap"></div>
</div>
<div data-role="footer">
<h1>註腳名稱</h1>
</div>
</div>
</body>
</html>
|