使用json从数据库到php页面检索经度

Question

am trying to plot latitude and longitude from database(mysql) to php page. 我试图从数据库（mysql）到php页面绘制纬度和经度。 so far i been able to display the marker without json with the code: 到目前为止，我能够使用代码显示没有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>

Thus i tried with json but its not displaying anything below is the code i tried: 因此，我尝试使用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>

Answer 1

I strongly believe you should separate your logic on both ends. 我坚信您应该在两端分开逻辑。

Your PHP Logic. 你的PHP逻辑。 Gets to work on its own, while you have your Frontend Logic JS working on its own. 自己运行Frontend Logic JS时，就可以自己工作。 This way it's easier to solve and sort out what the problem is. 这样，更容易解决和解决问题所在。

Below is the solution i think you should look at. 以下是我认为您应该查看的解决方案。 I do not have your database to play with. 我没有您要使用的数据库。 Hope you understand what i propose you should do to get it working. 希望你明白我建议你应该做些什么才能让它发挥作用。

STEP 1 第1步

PHP CODE - PHP File - yourphpfile.php PHP代码 - PHP文件 - yourphpfile.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


?>

The above code should show your JSON encoded data when you point to it on your browser. 当您在浏览器上指向它时，上面的代码应该显示您的JSON编码数据。

STEP 2 第2步

Your Javascript File(s) 您的Javascript文件

mymap.js file mymap.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);

 }

STEP 3 HTML File. 步骤3 HTML文件。

<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>

Looking at what i propose you do. 看看我建议你做什么。 You do not need to encode the data from the PHP file. 您无需对PHP文件中的数据进行编码。 Then, next you get the data into the JS end of things. 然后，接下来将数据放入JS末尾。

I hope this helps. 我希望这有帮助。

使用json从数据库到php页面检索经度

问题描述

1 个解决方案

解决方案1
0 2016-03-16 11:36:34

使用json从数据库到php页面检索经度

问题描述

1 个解决方案

解决方案1 0 2016-03-16 11:36:34

解决方案1
0 2016-03-16 11:36:34