信息框代码 - 缺少对象错误答案

【问题标题】：InfoBox Code - Missing Object error信息框代码 - 缺少对象错误
【发布时间】：2011-11-09 06:31:09
【问题描述】：

使用Google Maps V3 (PHP/MYSQL with custome infobox)，我将代码（如下）放在一起，尝试将 InfoBox 代码实现到我的一张地图中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Map My Finds - All Locations</title>
        <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
        <script type="text/javascript"> 
            var customIcons = {
            0: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            1: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
            };

 function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:6, 
            mapTypeId: 'roadmap' 
            }); 

    // Change this depending on the name of your PHP file 
    downloadUrl("phpfile.php", function(data) { 
        function createMarker(markerXML) { 
            var locationname = markerXML.getAttribute("locationname"), 
            address = markerXML.getAttribute("address"),
            totalfinds = markerXML.getAttribute("totalfinds"),
            lat = parseFloat(markerXML.getAttribute("osgb36lat")),                
            lng = parseFloat(markerXML.getAttribute("osgb36lon")),

            icon = {}; 
            if (totalfinds == 0) {   
            icon = customIcons[0]; 
            } else if (totalfinds >= 1) {   
            icon = customIcons[1];      
            } 
                marker = new google.maps.Marker({ 
                    map: map, 
                    position: new google.maps.LatLng(lat, lng), 
                    icon: icon.icon, 
                    shadow: icon.shadow 
                }), 

                boxText = document.createElement("div"); 

            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;"; 
            boxText.innerHTML = locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";

            var myOptions = { 
                content: boxText, 
                disableAutoPan: false, 
                maxWidth: 0, 
                pixelOffset: new google.maps.Size(-140, 0), 
                zIndex: null, 
                boxStyle: { 
                    background: "url('tipbox.gif') no-repeat", 
                    opacity: 0.75, 
                    width: "280px" 
                }, 
                closeBoxMargin: "10px 2px 2px 2px", 
                closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
                infoBoxClearance: new google.maps.Size(1, 1), 
                isHidden: false, 
                pane: "floatPane", 
                enableEventPropagation: false 
            }; 

            var infoBox = new InfoBox(myOptions); 

            google.maps.event.addListener(marker, 'click', function () { 
                    infoBox.open(map, marker); 
                } 
      ); 
        } 

        var xml = data.responseXML, 
            markers = xml.documentElement.getElementsByTagName("marker"), 
            numMarkers = markers.length; 

        for (var i = 0; i < numMarkers; i++) { 
            createMarker(markers[i]); 
        } 
    }); 
} 
            </script> 
            </head>    
            <body onLoad="load()">
                <div id="map"></div>
            </body> 
            </html>

当我尝试运行它时，我收到以下错误：'object expected line 29 char 5'。

我哪里错了？

如果有人能给我一些建议，我也将不胜感激，是否有任何调试工具可以帮助我在未来识别这些类型的错误。

更新代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>All Locations</title>
        <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
        <script type="text/javascript"> 
            var customIcons = {
            0: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            1: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
            };

            function load() { 
            var map = new google.maps.Map(document.getElementById("map"), { 
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:6, 
            mapTypeId: 'roadmap' 
            }); 

            var infoWindow = new google.maps.InfoWindow;

            // Change this depending on the name of your PHP file 
            downloadUrl("phpfile.php", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker");
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < markers.length; i++) { 
            var locationname = markers[i].getAttribute("locationname"); 
            var address = markers[i].getAttribute("address");
            var totalfinds = markers[i].getAttribute("totalfinds");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("osgb36lat")), 
            parseFloat(markers[i].getAttribute("osgb36lon")));
            var html = locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";
            var icon = {}; 
            if (totalfinds == 0) {   
            icon = customIcons[0]; 
            } else if (totalfinds >= 1) {   
            icon = customIcons[1];      
            } 
            var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            title: address,
            icon: icon.icon,
            shadow: icon.shadow
            }); 
            bounds.extend(point);
            map.fitBounds(bounds);
            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);
            });
            }

            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 onLoad="load()">
                <div id="map"></div>
            </body> 
            </html>

新的工作代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>All Locations</title>
        <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
        <script type="text/javascript" src="js/infobox.js"></script>
        <script type="text/javascript"> 
            var customIcons = {
            0: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            1: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
            };

            function load() { 
            var map = new google.maps.Map(document.getElementById("map"), { 
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:6, 
            mapTypeId: 'roadmap' 
            }); 

            // Change this depending on the name of your PHP file 
            downloadUrl("phpfile.php", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker");
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < markers.length; i++) { 
            var locationname = markers[i].getAttribute("locationname"); 
            var address = markers[i].getAttribute("address");
            var totalfinds = markers[i].getAttribute("totalfinds");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("osgb36lat")), 
            parseFloat(markers[i].getAttribute("osgb36lon")));
            var html = locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";
            var icon = {}; 
            if (totalfinds == 0) {   
            icon = customIcons[0]; 
            } else if (totalfinds >= 1) {   
            icon = customIcons[1];      
            } 
            var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            title: address,
            icon: icon.icon,
            shadow: icon.shadow
            }); 

            var boxText = document.createElement("div");

            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";        
            boxText.innerHTML =  locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";

            var myOptions = {
            content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
            background: "url('tipbox.gif') no-repeat"
            ,opacity: 0.75
            ,width: "280px"
            }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
            };
            var infoBox = new InfoBox(myOptions);  
            infoBox.open(map, marker); 
            bounds.extend(point);
            map.fitBounds(bounds);
            } 
            }); 
            } 

            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 onLoad="load()">
                <div id="map"></div>
            </body> 
            </html>

【问题讨论】：

如果您隔离出现错误的行会很好。复制和粘贴您的代码示例 1) 很痛苦，并且 2) 在涉及行号的地方可能不精确。
没有冒犯。（我的评论有点强硬，但我不是故意的。）不过，我在 OP 中没有看到“突出显示”的行。 lz可以单独复制粘贴吗？谢谢

标签： javascript html google-maps-api-3 infowindow

【解决方案1】：

您正在调用一个尚未定义的函数downloadUrl()。您需要定义该功能。一种方法是在原始问题中包含此代码：

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

【讨论】：

您好，非常感谢您抽出宝贵时间回复我的帖子。除了你的代码，我意识到我没有调用'infobox' js 文件。该文件现在可以正常工作，但我在设置边界时遇到了一些麻烦。正如您在我添加的更新代码中看到的那样： bounds = new google.maps.LatLngBounds();但是当我尝试添加 bounds.extend(point);和 map.fitBounds(bounds);根据我放置代码的位置，我要么得到一张空白地图，要么“地图边界”效果不起作用。我只是想知道如果你能告诉我我哪里出错了，是否有可能。克里斯。
我猜你需要在调用bounds.extend() 或map.fitBounds() 之前定义一个初始的bounds。 `bounds = new google.maps.LatLngBounds();` 创建一个空的 LatLngBounds 对象。您需要将两个 LatLng 对象传递给它，这些对象代表您正在创建的 LatLngBounds 的西南角和东北角。您也可以使用bounds.isEmpty() 检查我是否正确，这确实是问题所在。基本上，“扩展”一个空矩形是没有意义的。并且“适合”空白边界的地图似乎很可能是空白的。
嗨，非常感谢您在这方面的支持。很抱歉提出一个愚蠢的问题，但我是否保留 bounds = new google.maps.LatLngBounds();` 行，然后添加 bounds.isEmpty()？在 mapmyfinds.co.uk/alllocations.html 包含 InfoBox 之前，我确实得到了代码的边界部分，但我必须承认，我花了一个绝对的年龄才能让它工作。再次感谢您的时间和耐心。亲切的问候。克里斯
是的，您需要 bounds = new google.maps.LatLngBounds(); 行，因为这是创建 LatLngBounds 对象的原因。但是，您可能希望它是bounds = new google.maps.LatLngBounds(sw,ne);，其中sw 是一个LatLng 对象，代表初始边界的西南角，ne 是一个LatLng 对象，代表初始边界的东北角。跨度>
顺便说一句，如果我在这里的回答对您有所帮助，如果您可以通过单击它旁边的向上三角形来投票，那就太好了。（我从您的个人资料中看到您从未对任何问题或答案进行投票，这让我怀疑您可能不了解该功能。）这与接受答案（带有绿色复选标记）不同，您在答案不仅有帮助，而且完全解决了您的问题。