使用 JSON 从数据库检索纬度经度到 PHP 页面
retrieve latitude longitude from database to php page using json
我试图绘制从数据库(MySQL)到PHP页面的纬度和经度。 到目前为止,我已经能够使用代码在没有 JSON 的情况下显示标记:
<?
$dbname ='insert mysql database name'; //Name of the database
$dbuser ='insert mysql user name'; //Username for the db
$dbpass ='insert mysql password'; //Password for the db
$dbserver ='insert mysql database server address'; //Name of the mysql server
$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
mysql_select_db("$dbname") or die(mysql_error());
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Map API V3 with markers</title>
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; }
#map { width: 350px; height: 300px; border: 0px; padding: 0px; }
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//Sample code written by August Li
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
<?
$query = mysql_query("SELECT * FROM poi_example");
while ($row = mysql_fetch_array($query)){
$name=$row['name'];
$lat=$row['lat'];
$lon=$row['lon'];
$desc=$row['desc'];
echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');'n");
}
?>
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</html>
因此,我尝试使用json,但它没有显示以下任何内容是我尝试的代码:
<?
$dbname ='insert mysql database name'; //Name of the database
$dbuser ='insert mysql user name'; //Username for the db
$dbpass ='insert mysql password'; //Password for the db
$dbserver ='insert mysql database server address'; //Name of the mysql server
$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
mysql_select_db("$dbname") or die(mysql_error());
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Map API V3 with markers</title>
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; }
#map { width: 350px; height: 300px; border: 0px; padding: 0px; }
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//Sample code written by August Li
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
<?
$query = mysql_query("SELECT * FROM poi_example");
while ($row = mysql_fetch_array($query)){
$name=$row['name'];
$lat=$row['lat'];
$lon=$row['lon'];
$desc=$row['desc'];
$latlong = $lat.", ". $lon;
array_push($new, $latlong);
//echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');'n");
}
echo json_encode($new);
?>
var arr = <?php echo json_encode($new) ?>;
for(var i=0; i<arr.length;i++)
{
var lat = Number(arr[i].split(",")[0].trim());
var lon = Number(arr[i].split(",")[0].trim());
var four = new google.maps.LatLng(lat,lon);
var marker=new google.maps.Marker({
position:four,
map:map
});
}
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</html>
我坚信你应该在两端分开你的逻辑。
您的 PHP 逻辑。开始自己工作,而你的前端逻辑JS自己工作。这样就更容易解决和理清问题所在。
以下是我认为您应该查看的解决方案。我没有你的数据库可以玩。希望你明白我建议你应该做什么来让它工作。
步骤 1
PHP代码 - PHP 文件 - YOURPHPP文件.php
<?php
$dbname ='u769748933_tr'; //Name of the database
$dbuser ='u769748933_ta'; //Username for the db
$dbpass ='adamas'; //Password for the db
$dbserver ='mysql.1freehosting.com'; //Name of the mysql server
$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
mysql_select_db("$dbname") or die(mysql_error());
$q = mysql_("SELECT * FROM poi_example");
while ($row = mysql_fetch_array($q)){
$name=$row['name'];
$lat=$row['lat'];
$lon=$row['lon'];
$desc=$row['desc'];
$latlong = $lat.", ". $lon;
array_push($new, $latlong);
}
echo $new; // raw data, not json encoded
?>
当您在浏览器上指向 JSON 编码的数据时,上面的代码应该会显示它。
步骤 2
您的 Javascript 文件
我的地图.js文件
//Sample code written by August Li
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
var arr = 'youphpfile.php';// or url
for(var i=0; i<arr.length;i++)
{
var lat = Number(arr[i].split(",")[0].trim());
var lon = Number(arr[i].split(",")[0].trim());
var four = new google.maps.LatLng(lat,lon);
var marker=new google.maps.Marker({
position:four,
map:map
});
}
center = bounds.getCenter();
map.fitBounds(bounds);
}
步骤 3HTML 文件。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Map API V3 with markers</title>
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; }
#map { width: 350px; height: 300px; border: 0px; padding: 0px; }
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script src="mymap.js"></script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</html>
看看我建议你做什么。您不需要对 PHP 文件中的数据进行编码。然后,接下来您将数据放入JS端。
我希望这有所帮助。
相关文章:
- 使用php或javascript从facebook相册URL中删除多余的部分
- 将PHP变量传递给jQuery时遇到问题
- 通过javascript重定向html传递php变量
- 将数组从PHP传递到Javascript
- 如何在php文件中获取$.post-ajax传递的值
- Javascript运行php文件,然后下载文件
- PHP中的setcookie仅适用于localhost
- 如何使用jquery处理php循环通过元素
- 通过Ajax将JavaScript函数传递给PHP文件
- 而循环只设置php中输入字段中的第一个值
- 在 PHP 或 JavaScript 中获取用户的纬度和经度,以便在 PHP 中使用
- 使用 JSON 从数据库检索纬度经度到 PHP 页面
- PHP 谷歌地图按类型获取纬度和经度
- 从Javascript/Geocoder.geocode()获取纬度和经度,并将其与php一起使用
- 如何在php中转换谷歌地图中的任何纬度和经度地址
- 无法从PHP MySQL查询返回纬度/经度结果到Javascript JSON
- 使用JavaScript或PHP从地址返回经度和纬度的基本API
- 如何给经度和纬度值谷歌地图脚本从一个php变量
- 从MySQL数据库加载纬度/经度,并使用PHP、html和JavaScript在谷歌地图上显示点
- 需要帮助计算经度和纬度中点使用javascript从php值