Question

我正在使用JQuery的.get函数来检索XML文件。尝试读取文件的值时，所有变量都为空。

以下是我正在检索和读取XML文件的函数：

var get_locations = function(neLat, neLng, swLat, swLng, map, infoWindow)
        {
            $.get('Scripts/googlemap_ajax.php', {neLat: neLat, neLng: neLng, swLat: swLat, swLng: swLng}, 
            function(xml)
            {
                $(xml).find("marker").each(function()
                {
                    var name = $(this).find('name').text();
                    var tags = $(this).find('tags').text();
                    var coupon = $(this).find('coupon').text();
                    var icon = customIcons[coupon] || {};
                    var point = new google.maps.LatLng(
                                $(this).find('latitude').text(),
                                $(this).find('longitude').text());
        alert($(this).find('name').text());
                    var marker = new google.maps.Marker({
                        position: point,
                        map: map,
                        icon: icon.icon
                    }); 


                    var html = "HELLO THERE";

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

当代码运行时，我会收到一条警告，$(this).find('name').text()的值为空。

这是一个相应的XML文件（通过Firebug验证）：

<markers>
<marker locationID="1" name="Chris' Food Place" tags="American, Sushi" latitude="34.113432" longitude="-117.169855" coupon="yes"></marker>
<marker locationID="2" name="Chris' Food Place 2" tags="American," latitude="34.1158092" longitude="-117.1704145" coupon="no"></marker>
</markers>

以下是整个代码块，以防任何人碰巧发现导致问题的其他内容：

<style type="text/css" >

  html { height: 100% }

  body { height: 100%; margin: 0; padding: 0 }

</style>



<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>


<script type="text/javascript"> 

$(document).ready(function() 
{
    var alerted = false;

    function MYMAP() 
    {
        //internal
        var map = '';
        var center = '';
        var centerImage = '../Images/map_icon.png';
        var infoWindow = '';
        var last_ne_lat; //Check previous map corner

        var customIcons = {
              yes: {
                icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
              },
              no: {
                icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
              }
        };

        var get_locations = function(neLat, neLng, swLat, swLng, map, infoWindow)
        {
            $.get('Scripts/googlemap_ajax.php', {neLat: neLat, neLng: neLng, swLat: swLat, swLng: swLng}, 
            function(xml)
            {
                $(xml).find("marker").each(function()
                {
                    var name = $(this).find('name').text();
                    var tags = $(this).find('tags').text();
                    var coupon = $(this).find('coupon').text();
                    var icon = customIcons[coupon] || {};
                    var point = new google.maps.LatLng(
                                $(this).find('latitude').text(),
                                $(this).find('longitude').text());
        alert($(this).find('name').text());
                    var marker = new google.maps.Marker({
                        position: point,
                        map: map,
                        icon: icon.icon
                    }); 


                    var html = "HELLO THERE";

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


    //external:
    return {
            init: function(selector, latLng, zoom) 
            {
                var myOptions = {
                        zoom:zoom,
                        center: latLng,
                    streetViewControl: false,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                this.map = new google.maps.Map($(selector)[0], myOptions);
            },

            centerMarker: function(latlng) 
            {
                this.center = new google.maps.Marker({

                position: latlng,

                map: this.map,

                icon: centerImage,

                title: "You are here"

                });
            },

            addBoundChange: function() 
            {
                this.infoWindow = new google.maps.InfoWindow;
                test = this.map;
                test2 = this.infoWindow;
                // Add listener to map
                google.maps.event.addListener(this.map, 'bounds_changed', function() {
                    var zoom_level = this.getZoom();
                    if(zoom_level > 12)
                    {
                        var bounds = this.getBounds();
                        var ne = bounds.getNorthEast();
                        var neLat = bounds.getNorthEast().lat();
                        var neLng = bounds.getNorthEast().lng();
                                var sw = bounds.getSouthWest();
                        var swLat = bounds.getSouthWest().lat();
                        var swLng = bounds.getSouthWest().lng();
                        if( neLat != last_ne_lat)
                        {
                            last_ne_lat = neLat;    
                            get_locations(neLat, neLng, swLat, swLng, test, test2);

                        }
                    }
                    else //Alerts the user only once.
                    {
                        if(!alerted)    
                        { 
                            alerted=true;
                            alert("Please zoom in to continue displaying the location markers");
                        }
                    }
                });
            }

        };
    }
    var testMap = new MYMAP();
    var latlng = new google.maps.LatLng(<?php echo $lat; ?>,<?php echo $long; ?>);
    testMap.init('#map_canvas', latlng, 16);
    testMap.centerMarker(latlng);
    testMap.addBoundChange();

});
</script>


<body>
    <div id="locationSelect" style="width:100%"></div>

    <div id="map_canvas" style="width:70%; height:90%"></div>

</body>

Answer 1

您的目标是属性，而不是标记。尝试 $（this）.attr（“name”）而不是 $（this）.find（'name'）。text（）

Answer 2

.find（selector）用于遍历当前匹配元素集中每个元素的后代

.attr（attributeName）用于获取匹配元素集中第一个元素的属性值

您正在尝试访问xml元素的属性。使用$（this）.attr（attributeName）来获取值。

JQuery XML读取 - 空变量

2 个答案: