我试图从MySQL数据库中提取/获取数据并在javascript中使用它们。我发现get data from mysql database to use in javascript非常有用,但我无法展示任何内容(我从未使用过jQuery,所以可能我错过了一些东西,但我无法弄清楚什么呢)
<?php
error_reporting(0);
require 'db/connect.php';
require 'function/security.php';
$records = array();
if($result = $db->query("SELECT geoLat,geoLong FROM Stop")){
if($result->num_rows){
while ($row = $result->fetch_object()){
$records[] = $row;
}
//$result->free();
}
}
/*echo '<pre>', print_r($result),'</pre>';
echo '<pre>', print_r($records),'</pre>';*/
echo json_encode($records);
?>
<!DOCTYPE html>
<html>
<head>
<title>BrindisiBus</title>
<style>
/* style settings for Google map */
#map-canvas{
width : 500px; /* map width */
height: 500px; /* map height */
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!--- API GOOGLE MAPS V3 -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
$.getJSON('paline.php', function(data) {
$.each(data, function(fieldName, fieldValue) {
$("#" + fieldName).val(fieldValue);
});
});
/*
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
*/
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id='map-canvas' ></div><br/>
<p id="total"></p>
<p id="fieldName"></p>
</body>
</html>
使用查询得到经度和纬度,我应该将这些值保存在js中并在地图上创建标记。 可以在同一个文件中执行所有操作吗? 我怎么能检查getJSON是否至少起作用以及它是否给出了错误?
答案 0 :(得分:2)
<?php
error_reporting(0);
require 'db/connect.php';
require 'function/security.php';
$records = array();
if($result = $db->query("SELECT geoLat,geoLong FROM Stop")){
if($result->num_rows){
while ($row = $result->fetch_object()){
$records[] = $row;
}
//$result->free();
}
}
/*echo '<pre>', print_r($result),'</pre>';
echo '<pre>', print_r($records),'</pre>';*/
$data=json_encode($records);
?>
<!DOCTYPE html>
<html>
<head>
<title>BrindisiBus</title>
<style>
/* style settings for Google map */
#map-canvas{
width : 500px; /* map width */
height: 500px; /* map height */
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!--- API GOOGLE MAPS V3 -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var data=<?php echo $data; ?>
function initialize() {
$.each(data, function(fieldName, fieldValue) {
$("#fieldName").val(fieldValue.geoLat);
});
/*
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
*/
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id='map-canvas' ></div><br/>
<p id="total"></p>
<p id="fieldName"></p>
</body>
</html>