但是当我使用在线网络托管服务时...这就是我所获得的
<?php
$hostname="fdb3.awardspace.net";
$username="***";
$password="***";
$database="***";
?>
这是连接代码
<?php
require("dbinfo.php");
// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
// Opens a connection to a MySQL server
$connection=mysql_connect ($hostname, $username, $password);
if (!$connection) { die('Not connected : ' . mysql_error());}
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name",$row['name']);
$newnode->setAttribute("address", $row['address']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
$newnode->setAttribute("lat2", $row['lat2']);
$newnode->setAttribute("lng2", $row['lng2']);
$newnode->setAttribute("type", $row['type']);
}
echo $dom->saveXML();
?>
这是脚本和html
<!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"/>
<link href="AboutUs.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUqr_f2oJMPNcy4JopcjLNQD9YkVQ7JUc"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
normal: {
icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png'
},
low: {
icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png'
},
medium: {
icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'
},
high: {
icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png'
}
};
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var bounds = new google.maps.LatLngBounds();
setInterval("load();",3600000);
function load() {
directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -20.23256, lng: 57.49555},
zoom: 10
});
directionsDisplay.setMap(map);
directionsDisplay.setOptions( { suppressMarkers: true } );
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("ajax.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var point2 = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat2")),
parseFloat(markers[i].getAttribute("lng2")));
var date = new Date();
var html = "<b>" + name + "</b> <br/>" + address + "</b> <br/>" + date;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
var marker2 = new google.maps.Marker({
map: map,
position: point2,
icon: icon.icon
});
bindInfoWindow2(marker2, map, infoWindow, html);
}
});
downloadUrl("ajax.php", function(data) {
var xml = data.responseXML;
var lat_lng = xml.documentElement.getElementsByTagName("marker");
//Initialize the Direction Service
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color
var Colors = ["#00FF00","#ffff00","#0000ff","#ff0000"];
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
var type = lat_lng[i].getAttribute("type");
switch (type) {
case "normal":
var src = new google.maps.LatLng(
parseFloat(lat_lng[i].getAttribute("lat")),
parseFloat(lat_lng[i].getAttribute("lng")));
var des = new google.maps.LatLng(
parseFloat(lat_lng[i].getAttribute("lat2")),
parseFloat(lat_lng[i].getAttribute("lng2")));
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK ) {
var path = new google.maps.MVCArray();
var poly = new google.maps.Polyline({ map: map,
strokeColor: Colors[0],
geodesic: true});
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
poly.setPath(path);
map.fitBounds(bounds);
}
});
break;
}
}
for (var i = 0; i < lat_lng.length; i++) {
var type = lat_lng[i].getAttribute("type");
switch (type) {
case "low":
var src = new google.maps.LatLng(
parseFloat(lat_lng[i].getAttribute("lat")),
parseFloat(lat_lng[i].getAttribute("lng")));
var des = new google.maps.LatLng(
parseFloat(lat_lng[i].getAttribute("lat2")),
parseFloat(lat_lng[i].getAttribute("lng2")));
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK ) {
var path = new google.maps.MVCArray();
var poly = new google.maps.Polyline({ map: map,
strokeColor: Colors[1],
geodesic: true});
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
poly.setPath(path);
map.fitBounds(bounds);
}
});
break;
}
}
for (var i = 0; i < lat_lng.length; i++) {
var type = lat_lng[i].getAttribute("type");
switch (type) {
case "medium":
var src = new google.maps.LatLng(
parseFloat(lat_lng[i].getAttribute("lat")),
parseFloat(lat_lng[i].getAttribute("lng")));
var des = new google.maps.LatLng(
parseFloat(lat_lng[i].getAttribute("lat2")),
parseFloat(lat_lng[i].getAttribute("lng2")));
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK ) {
var path = new google.maps.MVCArray();
var poly = new google.maps.Polyline({ map: map,
strokeColor: Colors[2],
geodesic: true});
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
poly.setPath(path);
map.fitBounds(bounds);
}
});
break;
}
}
for (var i = 0; i < lat_lng.length; i++) {
var type = lat_lng[i].getAttribute("type");
switch (type) {
case "high":
var src = new google.maps.LatLng(
parseFloat(lat_lng[i].getAttribute("lat")),
parseFloat(lat_lng[i].getAttribute("lng")));
var des = new google.maps.LatLng(
parseFloat(lat_lng[i].getAttribute("lat2")),
parseFloat(lat_lng[i].getAttribute("lng2")));
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK ) {
var path = new google.maps.MVCArray();
var poly = new google.maps.Polyline({ map: map,
strokeColor: Colors[3],
geodesic: true});
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
poly.setPath(path);
map.fitBounds(bounds);
}
});
}
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function bindInfoWindow2(marker2, map, infoWindow, html) {
bounds.extend(marker2.getPosition());
google.maps.event.addListener(marker2, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker2);
});
}
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);
}
function doNothing() {}
//]]>
<div id="art-page-background-simple-gradient">
</div>
<div id="art-page-background-glare">
<div id="art-page-background-glare-image"></div>
</div>
<div id="art-main">
<div class="art-Sheet">
<div class="art-Sheet-tl"></div>
<div class="art-Sheet-tr"></div>
<div class="art-Sheet-bl"></div>
<div class="art-Sheet-br"></div>
<div class="art-Sheet-tc"></div>
<div class="art-Sheet-bc"></div>
<div class="art-Sheet-cl"></div>
<div class="art-Sheet-cr"></div>
<div class="art-Sheet-cc"></div>
<div class="art-Sheet-body">
<div class="art-Header">
<div class="art-Header-jpeg"></div>
<div class="art-Logo">
<h1 id="name-text" class="art-Logo-name"><a href="#">Traffic Management System</a></h1>
<div id="slogan-text" class="art-Logo-text">TMS</div>
</div>
</div>
<div class="art-nav">
<div class="l"></div>
<div class="r"></div>
<ul class="art-menu">
<li>
<a href="index.html" class=" active"><span class="l"></span><span class="r"></span><span class="t">Traffic News</span></a>
</li>
<li>
<a href="login.html"><span class="l"></span><span class="r"></span><span class="t">Login</span></a>
</li>
<li>
<a href="about.html"><span class="l"></span><span class="r"></span><span class="t">About</span></a>
</li>
</ul>
</div>
<div class="art-contentLayout">
<div class="art-content">
<div class="art-Post">
<div class="art-Post-body">
<div class="art-Post-inner">
<div class="art-PostMetadataHeader">
<h2 class="art-PostHeader">
Welcome
</h2>
</div>
<div class="cleared"></div>
</div>
<div class="cleared"></div>
</div>
<div id="map" style="width: auto ; height: 758px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-top: 1px solid #AAAAAA; border-left: 1px solid #AAAAAA"></div>
<div>
<strong>Results</strong>
</div>
<div id="output" style="font-size: 11px"></div>
</div>
</div>
</div>
<div class="cleared"></div><div class="art-Footer">
<div class="art-Footer-inner">
<a href="#" class="art-rss-tag-icon" title="RSS"></a>
<div class="art-Footer-text">
<p><a href="#">By Chandni|Muddathir|Bsc(Hons)Information System</a>
| <a href="#">Privacy Statement</a><br />
Copyright © 2016 ---. All Rights Reserved.</p>
</div>
</div>
<div class="art-Footer-background"></div>
</div>
<div class="cleared"></div>
</div>
</div>
<div class="cleared"></div>
<!-- Creative Commons License - Please keep designers creative credit unmodified and intact -->
<p class="art-page-footer"></p>
</div>