谷歌地图V3中的电子标签未定义错误

Question

我一直在将我的一个脚本从V2移植到V3，但我遇到了一个问题。我收到一个E标签未定义的错误，但我不确定为什么我会得到这个错误。我已经将Elabel.js更新为V3，它在这里...ELABLE.JS我不确定这是不是ELabel.js的好副本还是什么。我已经尝试了几个不同的副本，但都没有成功。

以下是使用V2的工作示例

V2 EXAMPLE

以下是V3示例。正如您在V3中看到的，范围环不会绘制，地图不会更新，表也不会填充。我知道这与ELabel.js有关，但我不确定为什么，我也找不到为什么会出现未定义错误的问题。我知道这与此相关，因为当我删除ELable.js的脚本包含时，我在V2上遇到了与我在V3上看到的相同的问题。

V3 EXAMPLE

由于代码太长，不能在这里发布，相关代码的链接在下面的链接中。第135行是ELabel错误的来源。这在V2中工作得很好，但在V3中就不行了。所以我不知道我是不是忽略了从V2到V3的变化。

EXAMPLE CODE

因此，谁能提供任何洞察力，为什么我会得到这个未定义的错误，并阐明我可能做错了什么和忽略了什么？

-Thanks

Answer 1

德州人，这是我的本地文件中的te脚本，它可以让圆圈和标签显示出来。所有ajax方面都是未经测试的。

下面的脚本应粘贴到文档头中，紧靠在结束</head>标记之前。

这替换了其他各种内联脚本。文档体中唯一剩下的脚本应该是google analytics (2个脚本)和StatCounter (1个脚本)。不应删除任何外部脚本。

<script>
var map;

jQuery(function($) {
    var llCenter = new google.maps.LatLng(32.8297,-96.6486);
    var URLToKML = 'http://www.mesquiteweather.net/NSGMap/GMStrikes.kml';
    var Sec2Update = 30;
    var KMLdate = 1372820133;
    //var NSdate = 1372927434;
    var NSdate = 0; //Force KML file creation on first update
    var TZString = 'CDT';
    var TZOffset = -5;

    var nyLayer;
    var lcolor = 'white';//This defines the line color for the target circle

    //Check if user wants debug mode
    dbg = (gup('dbg')=='y') ? 'y' : 'n';
    var force = (gup('force')=='y') ? 'y' : 'n';  //Force updates regardless of NSStrikes.txt date

    var mapReady = false;

    function initialize() {
        var mapOptions = {
            center: llCenter,
            panControl: false,
            zoom: 6,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.RIGHT_TOP
            },
            mapTypeId: google.maps.MapTypeId.HYBRID
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        var radarOptions = {
            gmap: map,
            name: 'Radar',
            position: google.maps.ControlPosition.TOP_RIGHT,
            action: function(){
                if (map.overlayMapTypes.length==0) {
                    map.overlayMapTypes.push(null); // create empty overlay entry
                    map.overlayMapTypes.setAt("1", tileNEX);
                }
                else {
                    map.overlayMapTypes.clear();
                }
            }
        }
        var radarButton = new buttonControl(radarOptions);
        tileNEX = new google.maps.ImageMapType({
            getTileUrl: function(tile, zoom) {
                return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
            },
            tileSize: new google.maps.Size(256, 256),
            opacity: 0.70,
            name: 'NEXRAD',
            isPng: true
        });

        function MyLogoControl() {
            var logo = $('<img/>').attr('src', 'images/watermark_MW_GMap.png').css('cursor', 'pointer').get(0);
            google.maps.event.addDomListener(logo, 'click', function() {
                window.location = 'http://www.mesquiteweather.net';
            });
            return logo;
        }
        var logoControlDiv = $('<div/>').css('padding','5px').append(MyLogoControl()).get(0);
        logoControlDiv.index = 0; // used for ordering
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);
        var nyLayer = new google.maps.KmlLayer(URLToKML + "?rand=" + (new Date()).valueOf(), {
            suppressInfoWindows: false,
            map: map,
            preserveViewport: true
        });

        google.maps.event.addListenerOnce(map, 'idle', function() {
            //You can add circles, or change other parameters
            //radials should be set to true for the maximum distance if you want radials
            //doDrawCircle(circleUnits, center, circleRadius, lineColor, lineWidth, lineOpacity, fillColor, fillOpacity, opts, radials)
            doDrawCircle('MI', llCenter,  62, lcolor, 1, .7, "#FFFF00", 0, { clickable: false }, false);
            doDrawCircle('MI', llCenter, 124, lcolor, 1, .7, "#FFFF00", 0, { clickable: false }, false);
            doDrawCircle('MI', llCenter, 187, lcolor, 1, .7, "#FFFF00", 0, { clickable: false }, false);
            doDrawCircle('MI', llCenter, 249, lcolor, 1, .7, "#FFFF00", 0, { clickable: false }, false);
            doDrawCircle('MI', llCenter, 312, lcolor, 1, .7, "#FFFF00", 0, { clickable: false }, false);
            doDrawCircle('MI', llCenter, 374, lcolor, 1, .7, "#FFFF00", 0, { clickable: false }, false);
            //doDrawCircle('MI', llCenter, 374, lcolor, 1, .7, '#00FF00', 0, { clickable: false }, true);   // This would add the radials

            UpdateKML();//Get the first set of data
        });
    }

    //Function to draw circles
    function doDrawCircle(circleUnits, center, circleRadius, liColor, liWidth, liOpa, fillColor, fillOpa, opts, radials) {
        var polyLineOptions = {
            map: map,
            path: null,//added with jQuery.extend()
            strokeColor: liColor,
            strokeOpacity: liOpa,
            strokeWeight: liWidth
        };
        var bounds = new google.maps.LatLngBounds();
        var circlePoints = [];
        var d = circleRadius / ((circleUnits == 'KM') ? 6378.8 : 3963.189);
        var d2r = Math.PI/180;
        var lat1 = d2r * center.lat();//radians
        var lng1 = d2r * center.lng();//radians
        for (var a=0; a<361; a++ ) {
            var tc = d2r * a;
            var sin_lat1 = Math.sin(lat1),
                cos_lat1 = Math.cos(lat1),
                sin_d = Math.sin(d),
                cos_d = Math.cos(d),
                sin_tc = Math.sin(tc),
                cos_tc = Math.cos(tc);
            var y = Math.asin(sin_lat1 * cos_d + cos_lat1 * sin_d * cos_tc);
            var dlng = Math.atan2(sin_tc * sin_d * cos_lat1, cos_d - sin_lat1 * Math.sin(y));
            var x = ((lng1 - dlng + Math.PI) % (2 * Math.PI)) - Math.PI ; // MOD function
            var point = new google.maps.LatLng(y/d2r, x/d2r);
            circlePoints.push(point);
            bounds.extend(point);
            if(a==0) {
                var offset = new google.maps.Size((circleRadius < 100) ? -5 : -8, 0);
                //ELabel(map, point, html, classname, pixelOffset, percentOpacity, isFloatShadow, overlap);
                var label = new ELabel(map, point, circleRadius, "style1", offset, 100, false);
                label.setMap(map);
            }
            if (radials && ((a==0) || (a==45) || (a==90) || (a==135) || (a==180) || (a==225) || (a==270) || (a==315))) {
                new google.maps.Polyline($.extend({}, polyLineOptions, {
                    path: [center, point]
                }));
            }
        }
        new google.maps.Polyline($.extend({}, polyLineOptions, {
            path: circlePoints
        }));
        map.fitBounds(bounds);//This sets the map bounds to be as big as the target circles, comment out if you don't want it
    }

    //This function is called on page load to start the refresh of the strikes
    function cycle() {
        setInterval(CountDown, 1000);
    }
    var intvl = Sec2Update;

    function CountDown() {
        intvl -= 1;
        if(intvl < 1) {
            intvl = Sec2Update;
            UpdateKML();
        }
        $("#cntdwn").html(intvl);
    }

    //This calls genkml.php on every refresh cycle to generate a new kml file
    function UpdateKML() {
        $.ajax({
            url: 'genkml.php',
            type: "GET",
            data: {
                force: force,
                ofd: KMLdate,
                nsd: NSdate, 
                dbg: dbg
            },
            cache: false,
            dataType: '',//????
        }).done(function(resp, textStatus) {
            var $debugDiv = $("#div1");
            if (dbg == 'y') {//Check if we want debug info
                if (!$debugDiv.length) {//Check if debug div exists, if not add it to end of body
                    $debugDiv = $("<div/>").attr('id', 'div1').appendTo('body');
                }
                var tmpresp = resp || ' ';
                $debugDiv.html('Response Status: ' + textStatus + '<br />' + tmpresp);
            } else {//Else empty the debug div
                $debugDiv.empty();
            }
            var dates = resp.split("|")[0].split("~");
            KMLdate = dates[0];
            NSdate = dates[1];
            updateHTML(resp);//This calls the updateHTML function if info was returned
        });

        if(map) {
            if(nyLayer) {
                map.removeOverlay(nyLayer); //Remove overlays
            }

            //nyLayer = new KmlLayer(URLToKML + "?rand="+(new Date()).valueOf() );
            nyLayer = new google.maps.KmlLayer(URLToKML + "?rand=" + (new Date()).valueOf(), {
                suppressInfoWindows: false,
                map: map,
                preserveViewport: true
            });
        }
        // Time overlayed on map - could be in updateHTML() to just show when .kml read last
        $('#currenttime').innerHTML = CurrentTime ("B", "12a", true, TZOffset);
    }

    function CurrentTime (type, hours, secs, ofs) {
        /*
        type (char)           hours (char)      secs (bool)     ofs (num)
        "U"-UTC               "24"=24 hr time   true=hh:mm:ss   0=hours from UTC
        "B"-User's Browser    "12"=12 hr time   false=hh:mm
        "S"-Web Site          "12a"=am/pm
        */
        if (type  == null){ type  = "B"; }     // These are the defaults
        if (hours == null){ hours = "12a"; }
        if (secs  == null){ secs  = true; }
        if (ofs   == null){ ofs   = 0; }
        var currentHour = 0;
        var currentMinute = 0;
        var currentSecond = 0;
        var time = [];
        var currentDate = new Date();

        if (type == "U") {
            currentHour = currentDate.getUTCHours();// UTC
        } else if (type == "B") {
            currentHour = currentDate.getHours();// Viewer's time
        } else {
            currentHour = currentDate.getUTCHours() + ofs;// your local time
            if(currentHour < 0) { currentHour = currentHour + 24;}
        }

        currentMinute = currentDate.getMinutes();
        currentMinute = (currentMinute < 10 ? "0" : "") + currentMinute;

        if (hours == "24") {
            if(currentHour == 24) { currentHour = 0 };// use if wanting 24 hour time
            currentHour = (currentHour < 10 ? "0" : "") + currentHour;
        } else if (hours == "12") {
            if(currentHour == 0) currentHour = 12;
            currentHour = (currentHour < 10 ? "0" : "") + currentHour;
        } else {
            if(currentHour == 0) currentHour = 12;// else no leading zero for am/pm
        }

        time.push(currentHour, currentMinute);

        if (secs) {
            currentSecond = currentDate.getSeconds();
            currentSecond = (currentSecond < 10 ? "0" : "") + currentSecond;
            time.push(currentSecond);
        }

        time = time.join(' : ');

        if(hours == "12a") {
            time = time + " " + (currentHour > 12 ? "PM" : "AM");
        }
        return time;
    }

    //This function is only used if you leave the debug checkbox below
    //  You can remove this function and the checkbox and set the debug
    //  mode using the dbg=y query parameter
    function debug(obj){
        if (obj.checked) {
            dbg = 'y';
        } else {
            dbg = 'n';
            $('#div1').empty();
        }
    }
    //This function is only used if you leave the Force Update checkbox below
    //  You can remove this function and the checkbox and set the force
    //  mode using the force=y query parameter
    function forceupdate(obj) {
        force = (obj.checked) ? 'y' : 'n';
    }
    //This function parses out the query parameter value
    function gup( name ) {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        return results ? results[1] : "";
    }
    /*
    You can add custom HTML code here and get access to the additional data that is returned everytime the page calls genkml.php.  
    In the example below, result is an array that holds 16 values (17, if in debug mode) with each of the values explained below.
    */
    function updateHTML(resp) {
        var result = resp.split("|");
        if (result.length < 16) return;//Make sure there is data
        document.getElementById('q1').innerHTML = result[1];//Number of strikes in first quarter of diplay time
        document.getElementById('q2').innerHTML = result[2];//Number of strikes in second quarter of diplay time
        document.getElementById('q3').innerHTML = result[3];//Number of strikes in third quarter of diplay time
        document.getElementById('q4').innerHTML = result[4];//Number of strikes in fourth quarter of diplay time
        document.getElementById('numicp').innerHTML = result[6];//Number of IC+ strikes
        document.getElementById('numicn').innerHTML = result[5];//Number of IC- strikes
        document.getElementById('numcgp').innerHTML = result[7];//Number of CG+ strikes
        document.getElementById('numcgn').innerHTML = result[8];//Number of CG- strikes
        document.getElementById('ds').innerHTML = result[9];//Total displayed strikes
        document.getElementById('ta').innerHTML = result[10];//Total strikes in NSStrikes
        document.getElementById('dt').innerHTML = result[11];//Display time
        document.getElementById('numicpd').innerHTML = result[13];//Number of IC+ strikes
        document.getElementById('numicnd').innerHTML = result[12];//Number of IC- strikes
        document.getElementById('numcgpd').innerHTML = result[14];//Number of CG+ strikes
        document.getElementById('numcgnd').innerHTML = result[15];//Number of CG- strikes
        document.getElementById('tu').innerHTML = Date();//Number of CG- strikes
        document.getElementById('sec2up').innerHTML = Sec2Update;//Number of CG- strikes
        var dt = result[11] / 4;
        document.getElementById('q1t').innerHTML = [0, dt].split('-');//Set time frame headers
        document.getElementById('q2t').innerHTML = [dt, 2*dt].split('-');
        document.getElementById('q3t').innerHTML = [2*dt, 3*dt].split('-');
        document.getElementById('q4t').innerHTML = [3*dt, dt].split('-');
    }

    //Onload event caller. Does not intefere with OnLoad event in Body tag.
    //Put this is after all functions to be called
    function addLoadEvent(func) {
        $(window).on('load', func);
    }

    initialize();
    FADING_SCROLLER.changecontent();
});
</script>

<script type="text/javascript">
/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************
* Wrapped as module by Beetroot-Beetroot
* Converted to use jQuery calls by Beetroot-Beetroot
* Note: The "proper" approach would be to use the 'color' jQuery plugin
***********************************************/
var FADING_SCROLLER = (function($) {//Module patttern
    var delay = 5000; //set delay between message change (in miliseconds)
    var maxsteps = 10; //number of steps to take to change from start color to endcolor
    var stepdelay = 200; //time in miliseconds of a single step
    //**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
    var startcolor = [201,201,201]; //start color (red, green, blue)
    var endcolor = [0,0,0]; //end color (red, green, blue)
    var fadelinks = 1;  //should links inside scroller content also fade like text? 0 for no, 1 for yes.

    // *** No need to edit below this line ***
    var faderdelay = 0;
    var index = 0;

    function changecontent() {
        var $fscroller = $("#fscroller").css('color', "rgb(" + startcolor.join(', ') + ")");
        var $content = $fscroller.find(".NWSinfo div").hide().eq(index).show().end();
        if(fadelinks) linkcolorchange(1);
        colorfade(1, 15);
        index = (index + 1) % $content.length;
    }

    function linkcolorchange(step) {
        $("#fscroller a").each(function() {
            $(this).css('color', getstepcolor(step));
        });
    }

    // Rafael Raposo edited function
    var fadecounter;
    function colorfade(step) {
        if(step<=maxsteps) {    
            $("#fscroller").css('color', getstepcolor(step));
            if (fadelinks)
                linkcolorchange(step);
            step++;
            fadecounter = setTimeout(function() {
                colorfade(step);
            }, stepdelay);
        } else {
            clearTimeout(fadecounter);
            $("#fscroller").css('color', "rgb(" + endcolor.join(', ') + ")");
            setTimeout(changecontent, delay);
        }
    }
    //Rafael Raposo's new function
    function getstepcolor(step) {
      var diff, newcolor = [];
      for(var i=0; i<3; i++) {
        diff = startcolor[i] - endcolor[i];
        if(diff > 0) {
           newcolor[i] = startcolor[i] - (Math.round((diff/maxsteps)) * step);
        } else {
           newcolor[i] = startcolor[i] + (Math.round((Math.abs(diff)/maxsteps)) * step);
        }
      }
      return "rgb(" + newcolor.join(', ') + ")";
    }

    // *** Expose public methods here ***
    return {
        changecontent: changecontent
    };
})(jQuery);
</script>

我只更改了javascript，而没有更改CSS或HTML。其中包含了一些注释，但考虑到更改的范围，这些注释还不够。

您将看到我将主脚本包装在一个$(function(){...})结构中，将渐变滚动脚本包装为一个模块。这样做是为了防止污染全局命名空间和脚本之间污染的可能性。我将map留在了全局名称空间中，以防其他任何脚本需要它。

我还对ajaxWDwx.js的本地副本做了一些修改，但我不认为它们中的任何一个都是相关的。