0

我已经在 Chrome 和 Firefox 中成功创建了一张地图，其中显示了 kmz 文件、单个标记和用户当前位置。加载的 kmz 文件基于使用 php 从外部域检索的信息。目前，当我使用 IE 9 加载页面时，它加载成功，我可以浏览地图并使用其他控件。

刷新时出现问题。地图没有出现。页面上的所有其他内容均已成功加载。我认为它可能与标记有关，但是当我删除它时，我仍然遇到同样的问题。我还通过一个程序运行我的代码来捕获尾随逗号和缺少的分号。没有什么！另一个奇怪的是IE9调试器中没有错误。

下面是代码：

        var map;
        var cstage;
        var cFor;
        var KML = new Array();
        var KML_def;
        var FI;
        var Fnum;
        var OI;
        var Onum;
        var ObsV = new Array(); //observed values
        var ObsT = new Array(); //observed time
        var ForV = new Array(); //forecasted values
        var ForT = new Array(); //forecasted time
        var myKmlOptions = {
            preserveViewport: true
        };

        //gets the current forecast
        function getForecast() {
            $.ajax({
                type: "GET",
                url: "/centralia/proxy.php",
                data: { requrl: "http://water.weather.gov/ahps2/hydrograph_to_xml.php?gage=cenw1&output=xml" },
                dataType: 'xml',
                success: function(xml) { parseXml(xml); }
            });
        }

        //parses the xml forecast data to get the observed and forecasted values
        function parseXml(xml) {
            var $xml = $(xml);
            var i;

            i = 1;
            Fnum = 0; //forecasted
            Onum = 0; //observed
            FI = 0;

            cFor = Date.now();
            $xml.find("forecast").children("datum").each(function() {
                ForV[i] = $(this).children("primary").text();
                var year = $(this).children("valid").text().substr(0, 4);
                var month = $(this).children("valid").text().substr(5, 2);
                var day = $(this).children("valid").text().substr(8, 2);
                var hour = $(this).children("valid").text().substr(11, 2);
                var min = $(this).children("valid").text().substr(14, 2);
                var sec = $(this).children("valid").text().substr(17, 2);
                ForT[i] = new Date(Date.UTC(year, month - 1, day, hour, min, sec));
                i = i + 1;
                Fnum = Fnum + 1;
            });

            i = 0;
            $xml.find("observed").children("datum").each(function() {
                ObsV[i] = $(this).children("primary").text();
                var year = $(this).children("valid").text().substr(0, 4);
                var month = $(this).children("valid").text().substr(5, 2);
                var day = $(this).children("valid").text().substr(8, 2);
                var hour = $(this).children("valid").text().substr(11, 2);
                var min = $(this).children("valid").text().substr(14, 2);
                var sec = $(this).children("valid").text().substr(17, 2);
                ObsT[i] = new Date(Date.UTC(year, month - 1, day, hour, min, sec));
                i = i + 1;
                Onum = Onum + 1;
            });

            cstage = ObsV[0];
            cFor = ObsT[0]; 

            //format time
            var c_mins = cFor.getMinutes();
            var c_Hrs = cFor.getHours();
            var a_p = "";

            if (c_Hrs < 12) {
                a_p = "AM";
            }
            else {
                a_p = "PM";
            }
            if (c_Hrs === 0) {
                c_Hrs = 12;
            }
            if (c_Hrs > 12) {
                c_Hrs = c_Hrs - 12;
            }

            c_mins = c_mins + "";

            if (c_mins.length == 1) {
                c_mins = "0" + c_mins;
            }

            //write out values to html div
            $("#forcastVal").text(cstage.concat(" ft"));
            $("#forcastDat").text(cFor.getMonth() + '/' + cFor.getDate() + '/' + cFor.getFullYear() + ' ' + c_Hrs + ':' + c_mins + ' ' + a_p);
            $("#ForIndicator").text("(observed value)");
            setMenu();
        }

        //initialize function
        function initialize() {

            var myOptions =
        {
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.HYBRID

            // sets the type of map to be displayed
            // HYBRID - displays a transparent layer of major streets on satellite images
            // ROADMAP - displays a normal street map 
            // SATELLITE - displays satellite images
            // TERRAIN - displays maps with physical features such as terrain
        };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            KML_def = new google.maps.KmlLayer('https://dl.dropboxusercontent.com/u/7710611/Flood_Poly_161ft.kml');

            //add a marker for the station
            var myLatLng = new google.maps.LatLng(46.711667, -122.9775);
            var Marker_CenPoint = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: 'Chehalis River at Centralia'
            });

            KML_def.setMap(map);
            Marker_CenPoint.setMap(map);

            Marker_CenPoint.info = new google.maps.InfoWindow({
                content: '<a href="http://water.weather.gov/ahps2/hydrograph.php?wfo=sew&gage=cenw1" target="_blank">Chehalis River at Centralia</a>'
            });

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

            //initial kmz load (all kmz files)
            KML[1] = new google.maps.KmlLayer('1.kml', myKmlOptions);
            KML[2] = new google.maps.KmlLayer('2.kml', myKmlOptions);
            KML[3] = new google.maps.KmlLayer('3.kml', myKmlOptions);
            KML[4] = new google.maps.KmlLayer('4.kml', myKmlOptions);
            KML[5] = new google.maps.KmlLayer('5.kml', myKmlOptions);
            KML[6] = new google.maps.KmlLayer('6.kml', myKmlOptions);
            KML[7] = new google.maps.KmlLayer('7.kml', myKmlOptions);
            KML[8] = new google.maps.KmlLayer('8.kml', myKmlOptions);
            KML[9] = new google.maps.KmlLayer('9.kml', myKmlOptions);
            KML[10] = new google.maps.KmlLayer('10.kml', myKmlOptions);
            KML[11] = new google.maps.KmlLayer('11.kml', myKmlOptions);
            KML[12] = new google.maps.KmlLayer('12.kml', myKmlOptions);
            KML[13] = new google.maps.KmlLayer('13.kml', myKmlOptions);
            KML[14] = new google.maps.KmlLayer('14.kml', myKmlOptions);

            //add current location marker
            var myloc = new google.maps.Marker({
                clickable: false,
                icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
                    new google.maps.Size(22, 22),
                    new google.maps.Point(0, 18),
                    new google.maps.Point(11, 11)),
                shadow: null,
                zIndex: 999,
                map: map
            });

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(pos) {
                    var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
                    myloc.setPosition(me);
                });
            }
            else {
                alert("Geolocation is not available");
            }

            //get current forecast
            getForecast();

        }
function twentyOFour(LNo, cell) {
            //loop through all cells and change color
            //for (k = 1; 4; k++) {
            var x = document.getElementById("t1").getElementsByTagName("td");
            x[0].style.backgroundColor = "#dcdcdc";
            x = document.getElementById("t2").getElementsByTagName("td");
            x[0].style.backgroundColor = "#dcdcdc";
            x[1].style.backgroundColor = "#dcdcdc";
            x[2].style.backgroundColor = "#dcdcdc";
            x[3].style.backgroundColor = "#dcdcdc";
            x = document.getElementById("t3").getElementsByTagName("td");
            x[0].style.backgroundColor = "#dcdcdc";
            x[1].style.backgroundColor = "#dcdcdc";
            x[2].style.backgroundColor = "#dcdcdc";
            x = document.getElementById("t4").getElementsByTagName("td");
            x[0].style.backgroundColor = "#dcdcdc";
            x[1].style.backgroundColor = "#dcdcdc";
            x[2].style.backgroundColor = "#dcdcdc";
            x[3].style.backgroundColor = "#dcdcdc";
            x[4].style.backgroundColor = "#dcdcdc";
            x[5].style.backgroundColor = "#dcdcdc";
            //document.getElementById("forcastCont").innerHTML;


            KML_def.setMap(null);
            for (var i = 1; i < 15; i++) {
                if (i == LNo) {
                    KML[i].setMap(map);
                    cell.style.backgroundColor = "#F0E68C";
                }
                else {
                    KML[i].setMap(null);
                }
            }
        }

我怀疑它与代码的时间有关，但我不确定。我所有的谷歌搜索都出现了最初不会加载但刷新后会加载的地图。我正在经历完全相反的情况。任何帮助将不胜感激！我希望我提供了足够的细节，我是一个初学者程序员。谢谢。

4

2 回答 2

0

在 F12 工具中检查您的网络瀑布，看看您是否真的在请求数据，否则我的第一件事就是这种 404 事情。您可能在浏览器或类似的东西中有数据缓存。如果网络选项卡不能帮助确定使用 Fiddler 查看原始请求。

错误不会出现在调试器中，但控制台中；）

然后我会在关键位置设置一些断点，并观察变量并单步执行代码以查看会发生什么。

希望这可以帮助您朝着正确的方向前进。

于 2013-10-25T03:54:59.643 回答
0

我发现了 Internet Explorer 中发生了什么。我怀疑功能和任务执行不正常，但我不太知道在哪里寻找它。最终，我在 Google 地图上添加了一个监听器。当地图空闲时侦听器会启动，或者换句话说，它完全完成加载。将此添加到第 104 行。

google.maps.event.addListenerOnce(map, 'idle', function(){
      getForecast();
});

这样，脚本的其余部分将等待地图完成加载。像魅力一样工作！谢谢提醒伙计。我仍然不确定为什么这在 Chrome 和 Firefox 中有效，但在 IE 中无效...

于 2013-10-30T17:24:38.187 回答