使用 google map API V3 的单个标记，使用 Where 条件显示数据库中的单个标记答案

【问题标题】：single marker using google map API V3 using Where condition to show single marker from database使用 google map API V3 的单个标记，使用 Where 条件显示数据库中的单个标记
【发布时间】：2015-12-07 09:19:08
【问题描述】：

我有两个文件，一个是 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();

?>

【问题讨论】：

google.maps.MarkerImage 自 2012 年以来已被弃用。您应该在构造标记时只使用 icon: "http://labs.google.com/ridefinder/images/mm_20_red.png"

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

【解决方案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>

【讨论】：

嘿 RamRaider 感谢您的帮助，但没有奏效。 .....我在html页面上获取驱动程序ID的值，只想将它传递给phpsqlajax_genxml3.php并使用该值作为参数运行查询
我不确定我是否理解。在您的原始 html 中，您在任何 html 之前回显 driver_id - 从而使其无效。在我所做的编辑中，driver_id 被分配为一个 javascript 变量，并由 ajax 函数发送到 php 脚本 - 这不是你想要的吗？
我现在已经通过发送到一个虚拟 php 文件来测试 ajax 方面，它确实发送了带有 driver_id 的请求，所以我不确定问题出在哪里
顺便说一句 - 为什么使用 xml 而不是 json 呢？另外，latitude 而不是 lattitude

【解决方案2】：

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

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

    session_start();

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

并使用 SESSION as 在 phpsqlajax_genxml3.php 上获取该值

$driver_id = $_SESSION['driver_id'];

【讨论】：