Map แผนที่ - สอบถามปัญหาจากการที่ใช้ php เขียนเป็น mobile app โดยมี jquery mobile
ผมติดปัญหาที่แผนที่ไม่ขึ้นมาแสดงครับCode (PHP) <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</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>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="d">
<h1>Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
<li data-role="list-divider">Name</li>
<?
$objConnect = mysql_connect("localhost","root","") or die(mysql_error());
$objDB = mysql_select_db("test");
$strSQL = " SELECT ID,name FROM test";
$objQuery = mysql_query($strSQL) or die (mysql_error());
while($objResult = mysql_fetch_array($objQuery))
{
?>
<li><a href="location.php?ID=<?=$objResult["ID"];?>"><?=$objResult["name"];?></a></li>
<?
}
?>
</ul>
</div>
<div data-position="fixed" data-role="footer" data-theme="d">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
Code (PHP) <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</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 src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="d">
<h1>Header</h1>
</div>
<div data-role="content">
<?php
$con=mysqli_connect("localhost","root","","test");
//Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM position where ID = '".$_GET["ID"]."' ");
$row = mysqli_fetch_array($result);
$lat = $row['latitude'];
$log = $row['longitude'];
mysqli_close($con);
?>
<script>
function success(position) {
var lat = <?=$lat?>;
var lng = <?=$log?>;
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '500px';
mapcanvas.style.width = '100%';
mapcanvas.style.padding = '0px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(lat,lng);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
<div align="center">
<article id="wrapper">
</article>
</div>
</div>
<div data-position="fixed" data-role="footer" data-theme="d">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
Code (PHP) <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
<li data-role="list-divider">Name</li>
<?
$objConnect = mysql_connect("localhost","root","") or die(mysql_error());
$objDB = mysql_select_db("test");
$strSQL = " SELECT ID,name FROM test";
$objQuery = mysql_query($strSQL) or die (mysql_error());
while($objResult = mysql_fetch_array($objQuery))
{
?>
<li><a href="location.php?ID=<?=$objResult["ID"];?>"><?=$objResult["name"];?></a></li>
<?
}
?>
</ul>
</body>
</html>
Tag Mobile, MySQL, HTML/CSS, JavaScript, jQuery
Date :
2014-07-09 22:58:36By :
DdoubleEView :
1069Reply :
1
Code Code (JavaScript)
/*
* Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
* Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
*/
$( document ).on( "pageinit", "#map-page", function() {
var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434); // Default to Hollywood, CA when no geolocation support
if ( navigator.geolocation ) {
function success(pos) {
// Location found, show map with these coordinates
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail(error) {
drawMap(defaultLatLng); // Failed to find location, show default map
}
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
} else {
drawMap(defaultLatLng); // No geolocation support, show default map
}
function drawMap(latlng) {
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Greetings!"
});
}
});
Date :
2014-07-10 11:05:16By :
mr.win
Server 02
Load balance : Server 02
