0

地図上にマーカーを配置しようとしています。これらのマーカーは、onload で読み取られる XML ファイルから取得されます。

<stations>
 <station name="AKRON" state="CO" lat="40.150" lon="103.150" elev="1384.0"/>
 </stations>

JavaScript は次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map_canvas { height: 100% }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
        <script type="text/javascript">
            var map;
            //create map
            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(40.85, -96.75),
                    zoom: 8,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                this.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

                //load xml file
                downloadUrl('raw_data.xml', function(data) {
                    var xml = xmlParse(data);
                    //get the lat lon data
                    var rowNodes = xml.getElementsByTagName("station");
                    for (var i = 0; i < rowNodes.length; i++) {
                        var latlng = new google.maps.LatLng(parseFloat(rowNodes[i].getAttribute("lat")),parseFloat(rowNodes[i].getAttribute("lon")));

                        createMarker(latlng);
                    }
                });             
            }

            function createMarker(latlng) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: latlng
                });
            }

            function downloadUrl(url, callback) {
                var status = -1;
                var request = createXmlHttpRequest();
                if (!request) {
                    return false;
                }

                request.onreadystatechange = function() {
                    if (request.readyState == 4) {
                        try {
                            status = request.status;
                        } catch (e) {
                            // Usually indicates request timed out in FF.
                        }
                        if ((status == 200) || (status == 0)) {
                            callback(request.responseText, request.status);
                            request.onreadystatechange = function() {};
                        }
                    }
                }
                request.open('GET', url, true);
                try {
                    request.send(null);
                } catch (e) {
                    changeStatus(e);
                }
            };

            function createXmlHttpRequest() {
                try {
                    if (typeof ActiveXObject != 'undefined') {
                        return new ActiveXObject('Microsoft.XMLHTTP');
                    } else if (window["XMLHttpRequest"]) {
                        return new XMLHttpRequest();
                    }
                } catch (e) {
                    changeStatus(e);
                }
                return null;
            };

            function xmlParse(str) {
                if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
                    var doc = new ActiveXObject('Microsoft.XMLDOM');
                    doc.loadXML(str);
                    return doc;
                }

                if (typeof DOMParser != 'undefined') {
                    return (new DOMParser()).parseFromString(str, 'text/xml');
                }

                return createElement('div', null);
            }

        </script>
    </head>
    <body onload="initialize()">
        <table border=1>
            <tr>
                <td>
                    <div id="map_canvas" style="width: 800px; height: 800px"></div>
                </td>
                <td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;">
                    <div id="side_bar"></div>
                </td>
            </tr>
        </table>
        <a href="basic9.htm">Back to the tutorial page</a>
    </body>
</html>

マップは正常に読み込まれますが、マーカーは表示されません。私はグーグル検索を行いましたが、うまくいくものは何も見つかりませんでした。

4

1 に答える 1

2

提供した xml から読み取られる緯度経度は " 40.15,103.15" であるため、マーカーはそこに読み込まれます。地図の中心は緯度、経度 " 40.85,-96.75" です。そのため、マーカーが表示されません。ズームアウトしてマーカーを表示するか、マップの中心を変更します

于 2012-10-25T12:42:11.577 に答える