0

MySQLテーブルからいくつかの都市のID、名前、および位置をロードしてから、それをHTMLテーブルに入力しようとしています。それらの都市を指すマーカーが付いたGoogleマップもあります。

ユーザーがHTML行（trタグ）の1つをクリックしたときに、都市マーカーに情報ウィンドウがポップアップ表示されるようにしたい。私はjQueryなしでPHP、Javascript、およびXMLを使用しています。

私のHTML：

<?php
   $query = "SELECT id, name, lat, lng FROM city ORDER BY id";
   $arrCities = mysql_query ($query);
?>

<div id="gmap" style="width: 550px; height: 450px"></div>

<table id="tblData">
   <tr>
       <th>ID</th>
       <th>City</th>
   </tr>

   <?php while ($row = mysql_fetch_assoc($arrCities)) { ?>

       <tr id="<?php echo $row['id']; ?>">

           <td><?php echo $row['id']; ?></td>
           <td><?php echo $row['name']; ?></td>

       </tr>
   <?php } ?>
</table>

マーカーを設定するためのXMLを作成するための私のPHP（my-xml-generator.php）：

<?php
    $query = "SELECT id, name, lat, lng FROM city ORDER BY id";
    $arrCities = mysql_query ($query);

    $dom = new DOMDocument('1.0', 'utf-8');
    $node = $dom->createElement ('markers');
    $parNode = $dom->appendChild ($node);

    header('Content-type: text/xml');

    while ($row = mysql_fetch_assoc($arrCities))
    {
            $node = $dom->createElement ('marker');
            $newNode = $parNode->appendChild ($node);
            $newNode->setAttribute ('id', $row['id']);
            $newNode->setAttribute ('name', $row['name']);
            $newNode->setAttribute ('lat', $row['lat']);
            $newNode->setAttribute ('lng', $row['lng']);
    }

    echo $dom->saveXML();
?>

私のJavascript：

    var gmap = new google.maps.Map (mapDiv, options);

    var arrMarkers = []; 
    var infoWindow = new google.maps.InfoWindow;

    // add markers to the map
    DownloadUrl ("my-xml-generator.php", function(data)
    {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName ("marker");

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

            var lat = parseFloat (markers[i].getAttribute("lat"));
            var lng = parseFloat (markers[i].getAttribute("lng"));
            var pos = new google.maps.LatLng (lat, lng);


            var markerOptions =
            {
                position    : pos,
                map         : gmap,
                draggable   : false
            };

            // add the marker
            var marker = new google.maps.Marker (markerOptions);
            arrMarkers.push(marker);

            // this part of code is not working
            var tr = document.getElementById(id);
            google.maps.event.addDomListener (tr, "click",  function() { RowClick(i); });


            // add info window
            var html = '<div>' + id + '</div>';

            BindInfoWindow (marker, gmap, infoWindow, html);
        }
    });


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


    function RowClick (i)
    {
        google.maps.event.trigger (arrMarkers[i], "click");
    }


    function DownloadUrl (url, callback)
    {
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function()
        {
            if (xhr.readyState == 4)
            {
                xhr.onreadystatechange = DoNothing;
                callback(xhr, xhr.status);
            }
        };

        xhr.open ('GET', url, true);
        xhr.send (null);
    }

    function DoNothing() {}

動作していない部分は、上記のjavascriptのこの部分です。

var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click", function() { RowClick(i); });

これを行う正しい方法は何ですか？

追加情報：JavaScriptを次のように変更した場合：

var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click", function() { alert(tr.id); });

次に、行をクリックするとアラートボックスがポップアップ表示されますが、表示されるIDは、クリックした行に関係なく、常に最後の行のIDになります。ありがとう

4

1 に答える 1

1

関数はコールバックを受け取りますが、変数の状態を保存するには、それをクロージャにする必要があります。

これでうまくいくと思います。

google.maps.event.addDomListener (tr, "click", 
(function(i){
    var row = i;
    return function(){
    RowClick(row);
    }
 })(i)
);
于 2012-05-31T05:48:03.623 に答える