 |
|
พอดีว่าทำตามที่เว็บนอกบอกแล้วขึ้นแผนที่นะครับ
แต่ว่า ธีมจะเป็นสีดำ พอกด Back กลับจากหน้าแผนที่มา หน้าหลักก็จะเละ หมดเลยครับ
แต่พอเปลี่ยน CSS มาเป็นที่ผมทำแล้วมันจะไม่ขึ้นแผนที่ครับ แต่จะไม่เละ
Code ครับ
Code (PHP)
<!DOCTYPE html>
<html>
<head>
<title>หัดทำนะครับ Jquery Mobile Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/hci.min.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background:url(image/bg004.png) no-repeat center center fixed !important;
background-size:contain;
}
.ui-panel-wrapper, .ui-page {
background-color: transparent !important;
}
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script type="text/javascript">
$(document).on("pageinit", "#map_page", function() {
initialize();
});
$(document).on('click', '#submit', function(e) {
e.preventDefault();
calculateRoute();
});
var directionDisplay,
directionsService = new google.maps.DirectionsService(),
map;
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278);
var myOptions = {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));
}
function calculateRoute()
{
var selectedMode = $("#mode").val(),
start = $("#from").val(),
end = $("#to").val();
if(start == '' || end == '')
{
// cannot calculate route
$("#results").hide();
return;
}
else
{
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
$("#results").show();
/*
var myRoute = response.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
alert(myRoute.steps[i].instructions);
}
*/
}
else {
$("#results").hide();
}
});
}
}
</script>
</head>
<body>
<div >
<div data-role="header">
<h1>แผนที่</h1>
<a href="index.php" data-icon="home">Home</a>
</div>
<div data-role="content">
<div class="ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:300px;"></div>
<div data-role="fieldcontain">
<label for="from">From</label>
<input type="text" id="from" value="กรุงเทพ"/>
</div>
<div data-role="fieldcontain">
<label for="to">To</label>
<input type="text" id="to" value="หัวหิน"/>
</div>
<div data-role="fieldcontain">
<label for="mode" class="select">Transportation method:</label>
<select name="select-choice-0" id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
</select>
</div>
<a data-icon="search" data-role="button" href="#" id="submit">Get directions</a>
</div>
<div id="results" style="display:none;">
<div id="directions"></div>
</div>
</div>
</div>
</body>
</html>
ผมดูมาจากเว็บนี้อะครับ
http://stackoverflow.com/questions/13345479/clean-example-of-directions-with-google-maps-in-jquery-mobile
ปัญหาก็คือ
1. เปลี่ยนเป็น Theme แบบที่ผมต้องการแล้วแผนที่จะไม่แสดงครับ
2. ถ้าใช้ Theme เดิมตามเว็บอ้างอิง เวลากด Back กลับมาหน้าหลักจะกลายเป็น Theme ของเขาหมดเลยครับ หน้าจะเละเลย
รบกวนช่วยหน่อยนะครับ พอดีผมหัดทำ Jquery Mobile เป็น โปรเจค HCI ส่งอาจารย์อะครับ (ปี2)
ขอบพระคุณล่วงหน้าครับ 
Tag : PHP, HTML/CSS, JavaScript, jQuery
|
ประวัติการแก้ไข
2014-11-09 21:39:38
2014-11-09 21:44:08
|
 |
 |
 |
 |
| Date :
2014-11-09 21:38:52 |
By :
yong0011 |
View :
1076 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
|
 |
