无法连接到在线数据库

时间:2016-03-21 10:57:26

标签: javascript php mysql database-connection web-hosting

使用xampp时,连接工作正常,数据正确检索,如下图所示 working map with output data from xampp db

但是当我使用在线网络托管服务时...这就是我所获得的

only map from online db

<?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 &copy; 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>        

0 个答案:

没有答案