单个标记使用谷歌地图API V3使用Where条件显示数据库中的单个标记

时间:2015-12-07 09:19:08

标签: javascript php jquery xml google-maps-api-3

我有两个文件index.php和另一个phpsqlajax_genxml3.php

在文件1中,我通过浏览器url获取价值并将该值存储在$driver_id变量中。

现在,当文件1控件转到文件2时,我希望在文件2中获取该值。并使用$driver_id值我要触发查询。

我已经复制粘贴下面的两个文件代码,请看看,如果你能解决我的问题,请帮助我。

file 1 : index.php

<?php
    if(isset($_GET["driver_id"])){
        echo $driver_id = trim($_GET["driver_id"]);
    }
    ?>

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
    <link rel="stylesheet" type="text/css" href="css/admin-style.css">

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

    <script type="text/javascript">

        var map, infoWindow, intervalId;

        function load() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: new google.maps.LatLng(18.489023, 73.814462),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
            });

            infoWindow = new google.maps.InfoWindow;

            // Trigger downloadUrl at an interval
            intervalId = setInterval(triggerDownload, 500);
        }

        function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
            });
        }

        function triggerDownload() {

            // Change this depending on the name of your PHP file
            downloadUrl("phpsqlajax_genxml3.php", function(data, $driver_id) {

                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("driver");

                for (var i = 0; i < markers.length; i++) {

                    var name = markers[i].getAttribute("name");
                    var address = markers[i].getAttribute("mobile_number");
                    /*var type = markers[i].getAttribute("type");*/
                    var point = new google.maps.LatLng(
                        parseFloat(markers[i].getAttribute("lattitude")),
                        parseFloat(markers[i].getAttribute("longitude")));

                    var html = "<b>" + name + "</b> <br/>" + address + "</b> <br/>" + point;
                    var icon = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_red.png");

                    var marker = new google.maps.Marker({
                        map: map,
                        position: point,
                        icon: icon.icon
                    });
                    bindInfoWindow(marker, map, infoWindow, html);
                }
            });
        }

        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() {}

    </script>

</head>
<body class="hold-transition skin-blue sidebar-mini" onload="load()">
    <div class="wrapper">

        <div class="content-wrapper">
            <section class="content">
                <div class="row">
                    <div class="col-md-12" id="map" style="height: 500px"></div>
                </div>
            </section>
        </div>

    </div>

    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="dist/js/app.min.js"></script>
</body>
</html>


file 2 : file 2 is fetching data as xml from database and returning it to index.php

     <?php

    error_reporting(E_ERROR | E_PARSE | E_WARNING);

    // Start XML file, create parent node

    /*if(isset($_GET['driver_id'])) {

        $driver_id = $_GET['driver_id'];

    }*/

    $dom = new DOMDocument("1.0");
    $node = $dom->createElement("driver");
    $parnode = $dom->appendChild($node);

    $connection=mysql_connect ('localhost', 'root', '');
    if (!$connection) {  die('Not connected : ' . mysql_error());}

    $db_selected = mysql_select_db('trackusdown', $connection);
    if (!$db_selected) {
        die ('Can\'t use db : ' . mysql_error());
    }

    $query = "SELECT * FROM driver WHERE driver_id='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("driver");
        $newnode = $parnode->appendChild($node);
        $newnode->setAttribute("name",$row['driver_name']);
        $newnode->setAttribute("mobile_number", $row['driver_mobile_number']);
        $newnode->setAttribute("lattitude", $row['driver_lattitude']);
        $newnode->setAttribute("longitude", $row['driver_longitude']);
        /*$newnode->setAttribute("driver_id", $driver_id);*/
    }

    echo $dom->saveXML();

?>

2 个答案:

答案 0 :(得分:1)

从这个问题来看,问题究竟是什么并不是很清楚,但我认为你无法通过ajax将driver_id发送到php脚本,然后查询数据库以生成xml文件?

ajax函数和回调看起来很不寻常,并且在这里略有修改。我希望这或多或少是你想达到的目标(虽然没有经过测试)

phpsqlajax_genxml3.php
----------------------
<?php
    error_reporting( E_ERROR | E_PARSE | E_WARNING );

    /* Is `driver_id` a string or an integer? */
    $driver_id = isset( $_GET['driver_id'] ) && !empty( $_GET['driver_id'] ) ? filter_input( INPUT_GET, 'driver_id', FILTER_SANITIZE_STRING ) : false;

    if( $driver_id ){

        $connection=mysql_connect ('localhost', 'root', '');
        if( !$connection ) die( 'Not connected : ' . mysql_error() );

        $db_selected = mysql_select_db('trackusdown', $connection);
        if ( !$db_selected ) die ( 'Can\'t use db : ' . mysql_error() );

        /* 
            As you are still using the deprecated mysql_* extensions you 
            need to be ultra careful with the data supplied so should filter
            it as much as needed
        */
        $driver_id=mysql_real_escape_string( strip_tags( $driver_id ) );


        $query = "SELECT * FROM driver WHERE driver_id='{$driver_id}';";
        $result = mysql_query( $query );


        if ( $result ) {

            $dom = new DOMDocument("1.0");
            $node = $dom->createElement("driver");
            $parnode = $dom->appendChild( $node );

            while( $row = @mysql_fetch_assoc($result) ){
                $node = $dom->createElement("driver");
                $newnode = $parnode->appendChild($node);
                $newnode->setAttribute("name",$row['driver_name']);
                $newnode->setAttribute("mobile_number", $row['driver_mobile_number']);
                $newnode->setAttribute("lattitude", $row['driver_lattitude']);
                $newnode->setAttribute("longitude", $row['driver_longitude']);
            }

            header("Content-type: text/xml");
            echo $dom->saveXML();



            mysql_free_result( $result );
            mysql_close( $connection );

            $dom=$node=$result=$connection=null;
            exit();
        }
    }
?>


html page
---------
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
        <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
        <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
        <link rel="stylesheet" type="text/css" href="css/admin-style.css">
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        <script type="text/javascript">

            var map, infoWindow, intervalId;

            <?php
                /* 
                    could use pure javascript for this instead but this is easy.
                    The driver_id needs to be sent via ajax so make it globally available
                    to make things easier with your functions.
                */
                echo "var driver_id='".trim( $_GET["driver_id"] )."';";
            ?>

            function load() {
                map = new google.maps.Map( document.getElementById("map"), {
                    center: new google.maps.LatLng(18.489023, 73.814462),
                    zoom: 8,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                });
                infoWindow = new google.maps.InfoWindow;

                // Trigger downloadUrl at an interval
                intervalId = setInterval(triggerDownload, 500);/* Every half second? */
            }

            function bindInfoWindow(marker, map, infoWindow, html) {
                google.maps.event.addListener(marker, 'click', function () {
                    infoWindow.setContent(html);
                    infoWindow.open(map, marker);
                });
            }



            function triggerDownload() {/* The url has the driver_id parameter set */
                downloadUrl.call( this, 'phpsqlajax_genxml3.php?driver_id='+driver_id, cbdownloadUrl );
            }


            function cbdownloadUrl( response ){/* callback function: do something with the returned XML  */

                var markers = response.documentElement.getElementsByTagName("driver");

                for ( var i = 0; i < markers.length; i++ ) {
                    var name = markers[i].getAttribute("name");
                    var address = markers[i].getAttribute("mobile_number");

                    var point = new google.maps.LatLng(
                        parseFloat( markers[i].getAttribute("lattitude") ),
                        parseFloat( markers[i].getAttribute("longitude") )
                    );

                    var html = "<b>" + name + "</b> <br/>" + address + "</b> <br/>" + point;
                    var icon = new google.maps.MarkerImage( "http://labs.google.com/ridefinder/images/mm_20_red.png" );

                    var marker = new google.maps.Marker({
                        map: map,
                        position: point,
                        icon: icon.icon
                    });
                    bindInfoWindow( marker, map, infoWindow, html );
                }
            }

            function downloadUrl( url, callback ) {/* Ajax request to fetch xml */
                var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
                request.onreadystatechange = function () {
                    if( request.readyState==4 && request.status == 200 ) {
                        callback( request.responseXML );
                    }
                };
                request.open('GET', url, true);
                request.send( null );
            }
        </script>
    </head>
    <body class="hold-transition skin-blue sidebar-mini" onload="load()">
        <div class="wrapper">
            <div class="content-wrapper">
                <section class="content">
                    <div class="row">
                        <div class="col-md-12" id="map" style="height: 500px"></div>
                    </div>
                </section>
            </div>
        </div>
        <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="dist/js/app.min.js"></script>
    </body>
</html>

答案 1 :(得分:1)

使用SESSION将index.php上的值设置为

   $( document ).ready(function() {
     var style =  document.createElement('style');
     var css = "@media (min-width: 1100px) {"+
                 ".ow_miniic_comment.newsfeed_comment_btn,"+
                 ".ow_miniic_like.newsfeed_like_btn,"+
                 "div.ow_dnd_widget,"+
                 ".ow_newsfeed_avatar,"+
                 ".ow_bl.ow_box_toolbar li,"+
                 ".ow_newsfeed_body,"+
                 ".ow_ipc_info {"+
                   "visibility: hidden;"+
                 "}"+
                 ".ow_miniic_comment.newsfeed_comment_btn.already-visible,"+
                 ".ow_miniic_like.newsfeed_like_btn.already-visible,"+
                 "div.ow_dnd_widget.already-visible,"+
                 ".ow_newsfeed_avatar.already-visible,"+
                 ".ow_bl.ow_box_toolbar li.already-visible,"+
                 ".ow_newsfeed_body.already-visible,"+
                 ".ow_ipc_info.already-visible {"+
                   "animation: none;"+
                    "visibility: visible;"+
                 "}"+
                 ".ow_miniic_comment.newsfeed_comment_btn.animation_start       {"+
                 "visibility: visible;"+
                 "-webkit-animation-name: zoomIn;"+
                 "-moz-animation-name: zoomIn;"+
                 "-o-animation-name: zoomIn;"+
                 "-ms-animation-name: zoomIn;"+
                 "animation-name: zoomIn;"+
                 "-webkit-animation-duration: 0.3s;"+
                 "-moz-animation-duration: 0.3s;"+
                 "-o-animation-duration: 0.3s;"+
                 "-ms-animation-duration: 0.3s;"+
                 "animation-duration: 0.3s;"+
               "}"+ 
             "}";


    style.innerHTML = css;
    $('body').prepend(style);
  });

并使用SESSION获取phpsqlajax_genxml3.php上的值

if(isset($_GET["driver_id"])){

    session_start();

    $_SESSION['driver_id']=trim($_GET["driver_id"]);
    $_SESSION['order_id']=trim($_GET["order_id"]);