0

私は、xmlファイルに基づいてGoogleマップを生成するためのasp.netコントロールを構築してきました。マップとポップアップウィンドウ（infoWindows）が機能しています。残念ながら、何らかの理由で、XMLファイル内のカスタム属性を使用して各マーカーの情報ウィンドウにデータを入力することができません。次の呼び出しを行うと、null値が返されます。varname =markers [i] .getAttribute（ "name"）;

このコードをいくつかの異なる方法で書き直しましたが、それでも値にアクセスできません。私はそれがxmlに存在することを知っているので、グーグルマップapi v3とjavascriptを介したxmlの解析についての高度な知識を持った誰かがここにいて、これの根底に到達するのを手伝ってくれるかもしれないと思っていました。以下にレンダリングされたhtmlと、xmlファイルpartnerLocations.xmlの内容を含めました。

注：私はグーグルによって提供され、ここで利用可能なgoogleUtils.jsクラスを利用しました：http：//gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/util.js

tests.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>

PartnerLocations.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は、$（document）.ready（function（）{を使用してjqueryを使用するか、または使用する場合に使用できます。

それが役に立てば幸い

于 2012-08-12T11:31:13.847 に答える
0

この質問を閲覧してくれたすべての人、特に提案でコメントしてくれた@Geocodezipと@AdRockに感謝します！結局のところ、この問題はまったく問題ではありませんでした。これは、このコードをローカルホストで実行していたという事実と関係がありました。これをライブサーバーにデプロイすると、すべてが期待どおりに機能しました。

于 2012-08-15T15:20:08.717 に答える