长期阅读,第一次海报。 希望你们都能帮助我。 我是PHP和JavaScript的绝对新手,但对HTML很强大,并且过去有谷歌地图的经验,但这对我来说是一种新方法。 也是我第一次使用V3 Google Maps API。
背景资料
我正在尝试为我的公司重写一个里程计算器,因为它使用了旧的雅虎地图 API,我快要破解它了,我可以品尝它! 我已经能够感觉到自己在身边,并从过去的程序员留下的东西中学到了一些关于PHP的知识,但我很难完成最后一点。
下面粘贴的代码利用一个单独的PHP文件(getaddress.php(和URL中的?cid=FOOBAR来查询我们的MySQL数据库并提取客户的地址并生成Google地图/行车路线页面。
我的斗争是将数据从数据库提取到谷歌地图显示标签中的var"路由"中。 我能够完美地呼应它:
<?php echo "Directions to " . $_GET['cid'];?>
但是我想不出一种方法来将相同的文本回显到路由变量中。 我问这个问题有点尴尬,因为我确信这是我只是忽略的简单事情,但它是那种"不知道你在寻找什么来寻找解决方案"之类的事情之一,所以我转向你们所有人和你们的才能。
"起源:'123 Easy Street'将始终是硬编码的,所以这不是问题。 问题是"目的地:",我想用信息getaddress填充.php从数据库中提取,在HTML正文中看起来像"1234 Easy Street 46142"。
有没有人对如何将该地址字符串放入 JavaScript 中路由变量的"目的地:"部分有任何建议?
我非常感谢你们大家可以提出的任何替代想法。 我被难住了。
getGmap.php代码
<?php require('constants.php');?>
<?php require('sessionHandler.php');?>
<?php require('dbHandler.php');?>
<?php if (!isset($_GET['cid']) || empty($_GET['cid'])) die('No company specified.');?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Driving Directions to Customer provided by Google Maps</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link type="text/css" href="./lib/default.css" rel="stylesheet">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnWPIRN8X0gLNqz-c1d87gv84CwZDuzjc&sensor=false"></script>
<script>
function process(){
//Main processing starts here.
//call getAddress.
getAddress();
}
//*** Get company information from database ***
var req; //global http request object
function getAddress(){
var url="getaddress.php?ajax=1&cid=<?php echo $_GET['cid'];?>";
if (window.XMLHttpRequest) { // IE/Windows ActiveX version
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
}
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
return true;
}
//*** End get company information from database ***
</script>
</head>
<body onload="process()">
<font class="normalText"><b>
<?php echo "Directions to " . $_GET['cid'];?>
<span id="addressSpan"></span>
from 123 Easy Street
</b></font>
<br />
<font class="normalText10">
<div style="width: 600px;">
<div id="map" style="width: 280px; height: 400px; float: left;"></div>
<div id="panel" style="width: 300px; float: right;"></div>
</div>
</font>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
var route = {
origin: '123 Easy Street',
destination: '1234 Easy Street 46142',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(route, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
</script>
</body>
</html>
获取地址.php代码
<?php require('constants.php'); ?>
<?php require('sessionHandler.php'); ?>
<?php require('dbHandler.php'); ?>
<?php
if (isset($_GET['cid']) && !empty($_GET['cid'])) {
//we only pass 5 chars of short id - actual id may be longer
$query="select Address1, City, State, Zipcode from companies where CompanyShortID like '".$_GET['cid']."%'";
}
else
die('Error: No company specified.');
dbConnect();
$result=mysql_query($query);
if (!$row=mysql_fetch_array($result)) // no records returned
echo "";
else {
echo $row['Address1']." ".$row['Zipcode'];
}
exit;
?>
正如承诺的那样,这是我能够开始工作的代码。
getGmap.php代码
<?php require('constants.php');?>
<?php require('sessionHandler.php');?>
<?php require('dbHandler.php');?>
<?php require('getaddress.php');?>
<?php
if (!isset($_GET['cid']) || empty($_GET['cid']))
die('No company specified.');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Driving Directions to Customer provided by Google Maps</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link type="text/css" href="./lib/default.css" rel="stylesheet">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnWPIRN8X0gLNqz-c1d87gv84CwZDuzjc&sensor=false"></script>
<script>
function process(){
//Main processing starts here.
//call getAddress. When AJAX call completes it will call inititalizeMap() to show the map.
getAddress();
}
//*** Begin AJAX***
var req; //global http request object
function getAddress(){
var url="getaddress.php?ajax=1&cid=<?php echo $_GET['cid'];?>";
if (window.XMLHttpRequest) { // IE/Windows ActiveX version
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
}
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
return true;
}
function processReqChange()
{
// only if req shows "complete"
if (req.readyState == 4) { //4=completed
// only if "OK"
if (req.status == 200) { //200=OK, so processing data
//alert(req.responseText);
//parse XML
//var response = req.responseXML.documentElement;
toAddress=req.responseText;
document.getElementById('addressSpan').innerHTML=" - "+toAddress;
initializeMap();
}
else {
alert("There was a problem retrieving the XML data:'n" + req.statusText);
}
}
}
//****** End AJAX ***
</script>
</head>
<body onload="process()">
<font class="normalText"><b>
Directions to: <?php echo $_GET["cid"]. "-". getAddress($_GET["cid"]); ?>
<span id="addressSpan"></span>
from: My Office - 1234 Easy Street
</b></font>
<br />
<font class="normalText10">
<div style="width: 600px;">
<div id="map" style="width: 280px; height: 400px; float: left;"></div>
<div id="panel" style="width: 300px; float: right;"></div>
</div>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
var route = {
origin: '1234 Easy Street',
destination: '<?php echo getAddress($_GET["cid"]); ?>',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(route, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
</script>
<br/>
</font>
</body>
</html>
获取地址.php代码
<?php
function getAddress($cid) {
//we only pass 5 chars of short id - actual id may be longer
$query="select Address1, City, State, Zipcode from companies where CompanyShortID like '" . $cid . "%'";
dbConnect();
$result=mysql_query($query);
if (!$row=mysql_fetch_array($result)) // no records returned
return "Company Not Found";
else {
return $row['Address1']." ".$row['Zipcode'];
}
return "Company Not Found";
}
?>