javascript - Google map API 页面未加载 - 解析 XML 错误

Question

我正在使用 Google Maps API 来显示从 mySQL 数据库中提取的标记。

我在本地主机上使用 WampServer 堆栈，并收到此错误:

This page contains the following errors:

Error on line 3 at column 2599: Extra content at the end of the document Below is a rendering of the page up to the first error.

我使用以下 JS 代码:

<script type="text/javascript">
    //<![CDATA[

    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'
        }
    };

    function initMap() {


        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 53.3784, lng: -1.47018},
            zoom: 14,
            mapTypeId: 'roadmap'
        });

        var infoWindow = new google.maps.InfoWindow({map: map});

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                var cityCircle = new google.maps.Circle({
                    strokeColor: '#0000FF',
                    strokeOpacity: 0.6,
                    strokeWeight: 2,
                    fillColor: '#0000FF',
                    fillOpacity: 0.35,
                    map: map,
                    center: pos,
                    radius: 8000
                });
                infoWindow.setPosition(pos);
                infoWindow.setContent('Location found.');
                map.setCenter(pos);
            }, function() {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Error when browser doesn't support geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }


        downloadUrl("phpsqlajax_genxml.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
                var name = markers[i].getAttribute("name");
                var address = markers[i].getAttribute("address");
                var available = markers[i].getAttribute("available");
                var disabled = markers[i].getAttribute("disabled");
                var phoneno = markers[i].getAttribute("phoneno");
                var opens = markers[i].getAttribute("opens");
                var closes = markers[i].getAttribute("closes");
                var dailyrate = markers[i].getAttribute("dailyrate");
                var hourlyrate = markers[i].getAttribute("hourlyrate");
                var info = markers[i].getAttribute("info");
                var type = markers[i].getAttribute("type");
                var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
                var html = "<b>" + name + "</b> <br/>" + address + "<br/> Available Spaces: <b>" + available + 
                            "</b> <br/> Disabled Access: <b>" + disabled + "</b> <br/> Phone: <b>" + phoneno + "</b> <br/> Opening Time: <b>" + opens +
                            "</b> <br> Closing Time: <b>" + closes + "</b> <br/> Daily Rate: <b>£" + dailyrate + "</b> <br/> Hourly Rate: <b>£" + hourlyrate + 
                            "</b> <br> Additional Info: <b>" + info + "</b> <br/> <button id=\"btnDirections\"> Directions </button> ";
                var marker = new google.maps.Marker({
                    map: map,
                    position: point
                });
                bindInfoWindow(marker, map, infoWindow, html);
            }
        });         
    }
    function bindInfoWindow(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
            map.setZoom(16);
            map.setCenter(marker.getPosition());
            marker.animation = google.maps.animation.DROP;
        });
    }

    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 handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\'t support geolocation.');
    }

    function doNothing() {}

    //]]>

</script>

这是生成 XML 文档的 PHP 文件:

include("check.php");   
function parseToXML($htmlStr)
{
    $xmlStr=str_replace('<','&lt;',$htmlStr);
    $xmlStr=str_replace('>','&gt;',$xmlStr);
    $xmlStr=str_replace('"','&quot;',$xmlStr);
    $xmlStr=str_replace("'",'&#39;',$xmlStr);
    $xmlStr=str_replace("&",'&amp;',$xmlStr);
    return $xmlStr;
}


// Select all the rows in the markers table

$query = "SELECT * FROM carpark";
$result = mysqli_query($db, $query);
if (!$result) {
    die('Invalid query: ' . mysqli_error());
}

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

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysqli_fetch_assoc($result)){
    // ADD TO XML DOCUMENT NODE
    echo '<marker ';
    echo 'name="' . parseToXML($row['name']) . '" ';
    echo 'address="' . parseToXML($row['address']) . '" ';
    echo 'lat="' . $row['lat'] . '" ';
    echo 'lng="' . $row['lng'] . '" ';
    echo 'available="' . parseToXML($row['available']) . '" ';
    echo 'disabled="' . parseToXML($row['disabled']) . '" ';
    echo 'phoneno="' . parseToXML($row['phoneno']) . '" ';
    echo 'opens="' . parseToXML($row['opens']) . '" ';
    echo 'closes="' . parseToXML($row['closes']) . '" ';
    echo 'dailyrate="' . parseToXML($row['dailyrate']) . '" ';
    echo 'hourlyrate="' . parseToXML($row['hourlyrate']) . '" ';
    echo 'info="' . parseToXML($row['info']) . '" ';
    echo '/>';
}

// End XML file
echo '</markers>';

在浏览器中查看源代码时，源代码以以下声明结尾:

function() {
    handleLocationError(true, infoWindow, map.getCenter());
});

Answer 1

确保您的 home.php 文件顶部没有包含“phpsqlajax_genxml.php”的 PHP 内容。

您的 XML 可能会被附加到主 html 文档中，而不是仅被下载。