Google地图不会使用php显示 [英] Google map is not displayed using php
问题描述
我有一个php代码，它可以从数据库（测试）和表名称manu中获取位置信息，这是使用phpmyadmin创建的，并使用标记在地图上显示这些位置。
UPDATED
< ;?
$ dbname ='test'; //数据库名称
$ dbuser =''; //用户名为db
$ dbpass =''; //密码为db
$ dbserver ='localhost'; // mysql服务器的名称
$ dbcnx = mysql_connect（$ dbserver，$ dbuser，$ dbpass）;
mysql_select_db（$ dbname）或死（mysql_error（））;
？>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< 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=falsetype =text / javascript>< / script>
< script type =text / javascriptsrc =js / jquery.js>< / script>
< script type =text / javascript>
var icon = new google.maps.MarkerImage（http://maps.google.com/mapfiles/ms/micons/blue.png，
google.maps.Size （32，32），新的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（）;
函数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;
}）;
}
函数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
}
}） ;
$ b $ .getJSON（'googlescript.php'，function（items）
{
for（var i = 0; i< items.length; i ++ ）
{
（函数（item）
{
addMarker（item.lat，item.long，item.name +''+ item.desc）;
}）（items [i]）;
}
}）;
center = bounds.getCenter（）;
map.fitBounds（bounds）;
}
< / script>
< / head>
< body onload =initMap（）style =margin：0px; border：0px; padding：0px;>
< div id =map>< / div>
< / body>
< / html>
googlescript.php文件代码：
<？php
$ dbname ='test'; //数据库名称
$ dbuser =''; //用户名为db
$ dbpass =''; //密码为db
$ dbserver ='localhost'; // mysql服务器的名字
$ tbl_name ='manu';
$ dbcnx = mysql_connect（$ dbserver，$ dbuser，$ dbpass）;
mysql_select_db（$ dbname）或死（mysql_error（））;
$ query = mysql_query（SELECT * FROM manu）or die（mysql_error（））;
header（'Content-Type：application / json'）;
$ rows = array（）;
while（$ row = mysql_fetch_array（$ query））
{
$ rows [] = $ row;
}
echo json_encode（$ rows）;
出口;
？>
Html Page
$
b $ b
body onload =initMap（）//你忘记关闭它。
div id =map
在html文件中进行以下更改。
脚本src =http://maps.google.com/maps/api/js?v=3&sensor= falsetype =text / javascript
script type =text / javascriptsrc =js / jquery.js
script type =text / javascript>
var icon =新的google.maps.MarkerImage（http://maps.google.com/mapfiles/ms/micons/blue.png，
新的google.maps.Size（32，32），新的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（）;
函数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;
} ）;
$ b函数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：
{
样式：google.maps.MapTypeControlStyle.HORIZONTAL_BAR
}，
navigationControl： true，
navigationControlOptions：
{
style：google.maps.NavigationControlStyle.SMALL
}
}）;
// getjson代码在这里如下所示，因为我无法在此格式化，所以我向下写了它。
center = bounds.getCenter（）;
map.fitBounds（bounds）;
}
/ script>
$ .getJSON（'googlescript.php'，函数（items） />
{
for（var i = 0; i< items.length; i ++）
{
{b $ b（function（item） （item.lat，item.long，item.name +''+ item.desc）;
}）（items [i]） ;
}
}}）;
我已经使用
$。getJSON（'googlescript.php'， googlescript.php文件并粘贴下面的代码：
$ query = mysql_query（SELECT * FROM manu）or die（mysql_error（））;
header（'Content-Type ：application / json'）;
$ rows = array（）;
while（$ row = mysql_fetch_array（$ query））
{
$ rows [] = $ row;
}
echo json_encode（$ rows）;
exit;
？>
现在检查它的行动，我相信你会得到你想要的结果。
不要忘记更改jquery路径并更改数据库连接设置，并请正确放置jquery路径。I have a php code which gets location information from database (test) and table name manu which is created using the phpmyadmin in wamp and display those locations on map using markers. Location details in the sense latitude and longitude value.
UPDATED
<? $dbname ='test'; //Name of the database $dbuser =''; //Username for the db $dbpass =''; //Password for the db $dbserver ='localhost'; //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"/> <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" src="js/jquery.js"></script> <script type="text/javascript"> 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 } }); $.getJSON('googlescript.php', function(items) { for (var i = 0; i < items.length; i++) { (function(item) { addMarker(item.lat, item.long, item.name + ' ' + item.desc); })(items[i]); } }); center = bounds.getCenter(); map.fitBounds(bounds); } </script> </head> <body onload="initMap()" style="margin:0px; border:0px; padding:0px;"> <div id="map"></div> </body> </html>googlescript.php file code :
<?php $dbname ='test'; //Name of the database $dbuser =''; //Username for the db $dbpass =''; //Password for the db $dbserver ='localhost'; //Name of the mysql server $tbl_name ='manu'; $dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass"); mysql_select_db("$dbname") or die(mysql_error()); $query = mysql_query("SELECT * FROM manu")or die(mysql_error()); header('Content-Type: application/json'); $rows = array(); while ($row = mysql_fetch_array($query)) { $rows[] = $row; } echo json_encode($rows); exit; ?>
解决方案Html Page
body onload="initMap()" //you forget to close it.
div id="map"Made below change in html file.
script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" script type="text/javascript" src="js/jquery.js" script type="text/javascript"> 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 } });
// getjson code goes here which is as below because i was unable to format it here so i wrote it downward. center = bounds.getCenter(); map.fitBounds(bounds);} /script>
$.getJSON('googlescript.php', function(items)
{
for (var i = 0; i < items.length; i++)
{
(function(item)
{
addMarker(item.lat, item.long, item.name + ' ' + item.desc);
})(items[i]);
}
});I have used
$.getJSON('googlescript.php',so you need to create agooglescript.phpfile and paste below code in it.$query = mysql_query("SELECT * FROM manu")or die(mysql_error()); header('Content-Type: application/json'); $rows = array(); while ($row = mysql_fetch_array($query)) { $rows[] = $row; } echo json_encode($rows); exit;?>
Now check it in action and I'm sure you will get result that you wanted. Do not forget to change jquery path and change database connection setting and please place jquery path proper.
这篇关于Google地图不会使用php显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
