PHP谷歌地图实时跟踪

时间:2014-11-03 17:57:40

标签: javascript php google-maps

我对编程完全陌生。我刚刚学习了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>

0 个答案:

没有答案