<!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>建立景點清單頁面，連結 Google Map</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>
<style>
#googleMap {
margin: 0 auto;
width: 640px;
height: 600px;
border: 5px solid #FFF;
border-radius: 5px;
box-shadow: 2px 2px 2px 2px #666;
}
.title{color:brown;font-size:18px;padding-top:10px;padding-left:10px;}
</style>
<script language="Javascript">
// 定義顯示 mappage 頁面時執行行 GetMap() 載入地圖和地標
$(function(){
$("#pageMap").bind("pageshow", GetMap); // 載入地圖和地標
});
var curGeoPoint={lat:25.0336, lng:121.56482,n1:"台南大學",m1:"位於台南市樹林街"};
function GetGeo(lat,lng,n1,m1) {
//取得目前定位
curGeoPoint.lat=lat;
curGeoPoint.lng=lng;
curGeoPoint.n1=n1;
curGeoPoint.m1=m1;
// mappage 的 pageshow 會呼叫 GetMap() 顯示地圖
$.mobile.changePage("#pageMap", "slide", false, true);
//GetMap(); // 也可以在此直接呼叫 GetMap() 顯示地圖
e.preventDefault(); // 避免重複觸發
}
// 以該點為中心顯示地圖
function GetMap() {
var map_div = document.getElementById("googleMap");
// 取得目前定位點
var latlng = new google.maps.LatLng(curGeoPoint.lat, curGeoPoint.lng);
var gmap = new google.maps.Map(map_div, {
zoom:14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// 建立地標
var marker=new google.maps.Marker({
position: latlng,
map: gmap,
//icon: "images/rabit.png",
title: curGeoPoint.n1
});
// 觸碰地標
google.maps.event.addListener(marker, "click", function(event) {
infowindow = new google.maps.InfoWindow({
content: '<div class="title">' + curGeoPoint.m1 + "</div>"
});
infowindow.open(gmap,marker);
})
}
</script>
</head>
<body>
<div data-role="page" id="pageHome">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="javascript:GetGeo(22.983932, 120.207268,'台南大學','台南大學位於台南市樹林街')">
<h3>台南大學</h3>
<p>位於台南市樹林街</p>
</a></li>
<li><a href="javascript:GetGeo(22.998677, 120.216122,'成功大學','成功大學位於台南市後火車站')">
<h3>成功大學</h3>
<p>位於台南市後火車站</p>
</a></li>
<li><a href="javascript:GetGeo(23.193101, 120.268471,'台灣首府大學','台灣首府大學位於台南麻豆')">
<h3>台灣首府大學</h3>
<p>位於台南麻豆</p>
</a></li>
<li><a href="javascript:GetGeo(23.323728, 120.274910,'南榮科大','南榮科大位於台南鹽水')">
<h3>南榮科大</h3>
<p>位於台南鹽水</p>
</a></li>
</ul>
</div>
<div data-position="fixed" data-role="footer" data-theme="e">
<div data-role="navbar">
<ul>
<li data-icon="home"><a href="#pageHome" data-transition="slide">主頁清單</a></li>
<li data-icon="star"><a href="#pageMap" data-transition="slide">瀏覽地圖</a></li>
</ul>
</div>
</div>
</div>
<!-- mappage page -->
<div data-role="page" id="pageMap">
<div data-role="content">
<div id="googleMap"></div>
</div>
<div data-position="fixed" data-role="footer" data-theme="e">
<div data-role="navbar">
<ul>
<li data-icon="home"><a href="#pageHome" data-transition="slide">主頁清單</a></li>
<li data-icon="star"><a href="#pageMap" data-transition="slide">瀏覽地圖</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>