0

当我尝试将自定义信息框与 google API v3 PHP / SQL 数据库一起使用时，我遇到了当前问题。我很难弄清楚我在哪里搞砸了，div 显示为空白而不是地图。任何帮助都会很棒！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">

var customIcons = {
  Clinic: {
    icon: 'icon_2.png',
  },
  Secondary: {
    icon: 'icon_1.png',
  }
};

function initialize() {
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        scrollwheel: false,
        mapTypeId: 'roadmap'
    });


    downloadUrl("xml.php", function(data) {
        function createMarker(markerXML) {
            var name = markerXML.getAttribute("name"),
                postid = markers [i].getAttribute("post_id"),
                address = markers[i].getAttribute("address"),
                phone = markers[i].getAttribute("phone"),          
                listtype = markers[i].getAttribute("type"),
                monday = markers[i].getAttribute("monday"),
                tuesday = markers[i].getAttribute("tuesday"),
                wednesday = markers[i].getAttribute("wednesday"),
                thursday = markers[i].getAttribute("thursday"),
                friday = markers[i].getAttribute("friday"),
                saturday = markers[i].getAttribute("saturday"),
                sunday = markers[i].getAttribute("sunday"),
                type = markers[i].getAttribute("type"),
                point = new google.maps.LatLng(
                lat = parseFloat(markerXML.getAttribute("lat")),
                lng = parseFloat(markerXML.getAttribute("lng")),


                icon = customIcons[type] || {},

                marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(lat, lng),
                    icon: icon.icon,
                }),

                boxText = document.createElement("div");

            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
            boxText.innerHTML = "<b>" + name + "</b> <br/> <i>" + listtype + "</i> <br/>" + address + "<br/>" + phone + "<br/>" + monday + tuesday + wednesday + thursday + friday + saturday + sunday;

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

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>    


<div id="map_canvas" style="width: 500px; height: 300px"></div>

4

1 回答 1

1

查看 javascript 控制台并修复您在那里发现的错误。只需注释掉 dowloadUrl 调用即可让您恢复地图。

您没有提供 xml 示例，但第二步（在修复 javascript 错误之后）是在浏览器中打开 xml 提要并查看它是否有效（或者您可以通过 xml 验证器运行它）

这篇文章（看起来你可能已经开始阅读了）还提供了一些调试建议。

工作版

于 2012-08-23T02:39:56.007 回答