0

我一直在构建一个 asp.net 控件来生成基于 xml 文件的谷歌地图。我有地图工作，以及弹出窗口（infoWindows）。不幸的是，由于某种原因，我不能使用 XML 文件中的自定义属性来填充每个标记的 infoWindow。当我调用时返回一个空值： var name = markers[i].getAttribute("name");

我已经用几种不同的方式重写了这段代码，但我仍然无法访问该值。我知道它存在于 xml 中，所以我希望这里可能有人具有 google maps api v3 的高级知识并通过 javascript 解析 xml 可以帮助我深入了解这一点。我在下面包含了呈现的 html，以及 xml 文件 partnerLocations.xml 的内容。

注意：我确实使用了由 google 提供的 googleUtils.js 类，可在此处获得：http: //gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/util.js

testing.aspx（实现控制的测试页面）呈现的输出：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>
<script type="text/javascript" src="/includes/js/googleUtils.js"></script>
<script type="text/javascript">
    google.maps.event.addDomListener(window, 'load', function () {
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 3,
            center: new google.maps.LatLng(52.5,-117.5),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infoWindow = new google.maps.InfoWindow;
        google.maps.event.addListener(map, 'click', function () {
            infoWindow.close();
        });

        downloadUrl("/includes/xml/partnerLocations.xml", function (data) {
            var markers = data.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
                var latlng = new     google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
                var name = markers[i].getAttribute("name");
                var windowContents = "<h3>" + name + "</h3>";
                var marker = new google.maps.Marker({ position: latlng, map: map });
                bindInfoWindow(marker, map, infoWindow, windowContents);
            }
        });

        function bindInfoWindow(marker, map, infowindow, html) {
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(html);
                infowindow.open(map, marker);
            });
        }
    });
</script>
<div id="map_canvas" style="width: 700px; height: 500px">
</div>

</html>

合作伙伴位置.xml：

<?xml version="1.0" encoding="UTF-8"?>
<markers>
  <marker lat="37.401220" lng="-122.120604" name="PartnerB" address="StreetAddress" description="Thisisourpartner..."/>
  <marker lat="37.413320" lng="-122.125604" name="PartnerB" address="StreetAddress" description="Thisisourpartner..."/>
  <marker lat="37.433480" lng="-122.139062" name="PartnerC" address="StreetAddress" description="Thisisourpartner..."/>
  <marker lat="37.445427" lng="-122.162307" name="PartnerD" address="StreetAddress" description="Thisisourpartner..."/>
</markers>
4

2 回答 2

0

我的网站上有谷歌地图，我已经在其中运行了你的 xml 文件并查看了所有位置

这是我使用的代码，其中 test.xml 是您的 xml 文件。我还在与显示它的页面相同的目录中获得了 xml 文件

function load() {
var map = new google.maps.Map(document.getElementById("gmap"), {
    center: new google.maps.LatLng(50.734850, -3.536562),
    zoom: 7,
    mapTypeId: 'roadmap'
});

var infoWindow = new google.maps.InfoWindow;
var bounds = new google.maps.LatLngBounds();

// Change this depending on the name of your PHP file
downloadUrl("test.xml", 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 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;
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
        });
        bindInfoWindow(marker, map, infoWindow, html);
        bounds.extend(point);
    }

    map.fitBounds(bounds);
});
}

Yu 可以使用或者如果使用 jquery 使用 $(document).ready(function(){

希望能帮助到你

于 2012-08-12T11:31:13.847 回答
0

感谢所有查看此问题的人，尤其是@Geocodezip 和@AdRock，他们提出了建议！事实证明，这个问题根本不是问题，这与我在 localhost 上运行此代码有关。一旦我将它部署到实时服务器，一切都按预期工作。

于 2012-08-15T15:20:08.717 回答