我对编程完全陌生。我刚刚学习了PHP,现在正尝试使用谷歌地图进行实时跟踪。
当我运行我的脚本时,我得到一张中心位置正确但没有旅行的地图。
该脚本基于:
https://developers.google.com/maps/articles/phpsqlajax_v3?csw=1
我添加了一个对setTimeout()的调用以进行实时跟踪,现在已将其注释掉,以防它导致问题。
我测试了我的newTripXml.php脚本,它独立运行。但是当我将一个echo语句放入其中时,我发现下面的代码永远不会调用它。它与下面的php文件位于同一目录中,我在XAMPP中运行。
我真的很感激一些帮助。感谢。
<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/includes.php');
session_start();
if(Nav::getInstance()->loggedIn())
if(array_key_exists(DBAtr::TripID,$_GET))
$tripID= $_GET[DBAtr::TripID];
echo "DRAW MAP!!!!!!!!!!!!!!!!!!!<br/>";
$tripID=1;
if(!isset($tripID)) { //logout
Nav::getInstance()->logOut();
exit;
}
?>
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title><?php echo "Trip Report"; ?></title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
var markersArray = []; //global markers array
var map;
/*var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}*/
//load new map
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center : new google.maps.LatLng('33.347', '248.161'),
zoom : 13,
mapTypeId : 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
//first call to get & process inital data
downloadUrl("newTripXml.php",processXML);
}
//update map
function processXML(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
//clear markers before you start drawing new ones
resetMarkers(markersArray)
for(var i=0; i<markers.length; i++) {
var host = markers[i].getAttribute("host");
var type = markers[i].getAttribute("active");
var lastupdate = markers[i].getAttribute("lastupdate");
var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + "Host: </b>" + host + "<br>" + "<b>Last Updated: </b>" + lastupdate + "<br>";
var icon = customIcons[type] || {}; //?!!!
var marker = new google.maps.Marker({
map : map,
position : point,
icon : icon.icon,
shadow : icon.shadow
});
//store marker object in a new array
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
/*
set timeout after you finished processing & displaying first lot of markers
requests on the server can take some time, so you want to make another one
only when the first one is completed
*/
/*setTimeout(function() {
downloadUrl("newTripXml.php",processXML);
}, 5000);*/
}
//clear existing markers from map
function resetMarkers(arr) {
for(var i=0; i<arr.length; i++){
arr[i].setMap(null);
}
arr=[]; //reset marker array for next call
}
//bind info window
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
//download url
function downloadUrl(url, callback) {
var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
request.onreadystatechange = function() {
if(request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>