如何使用远程 js 文件查找问题 (Bing 地图 API)

Question

This issue is hard to explain, I post it here because I don't know what to do.

I have a Bing map v8 using javascript API, it works using many remote files.

I need to show some custom html elements over the map, I can't do it using normal pushpins, markers or overlays, so I found in a blog a way to do it using "custom overlays", its works fine , it's a prototipe object, it's have an HTML element to send to the API.

Sadly it worked in some files but suddenly give me an error in my last code, I can't figure how to find what is wrong, I can not debug it or comment it because I can not edit those remote files (they are in a microsoft server).

I made this jsfiddle to show the error: https://jsfiddle.net/2x1nh8pa/2/

var maps='microsoft';

var marker=new Array();

window.startm = function(){
    var latlng=new Microsoft.Maps.Location(-20.976,-68.709);
    var myOptions={
        enableClickableLogo: false,
        enableSearchLogo: false,
        customizeOverlays: true,
        zoom: 16,
        center: latlng,
        mapTypeId: Microsoft.Maps.MapTypeId.aerial
    };
    map=new Microsoft.Maps.Map(document.getElementById("map_canvas"), myOptions);
    addOverlays();
}
function addOverlays() {
    // This is the prototype!
    function CustomMarker(latlng, map, cont, clas, title, args) {
        this.latlng = latlng;
        this.args = args;
        this.cont = cont;
        this.clas = clas;
        this.title = title;
        if(maps=='google')  this.setMap(map);
    }
  CustomMarker.prototype = new Microsoft.Maps.CustomOverlay();
  CustomMarker.prototype.draw = function() {
        var self = this;
        var div = this.div;
        //
        if (!div) {
            div = this.div = document.createElement('div');

            div.innerHTML=this.cont;
            div.className = this.clas;
            div.style.position = 'absolute';
            div.style.cursor = 'pointer';

            div.title=this.title;

            div.style.marginLeft= (typeof(self.args.anchorLft) !== 'undefined'?self.args.anchorLft:'-36px');
            div.style.marginTop = (typeof(self.args.anchorTop) !== 'undefined'?self.args.anchorTop:'-36px');
            this.setHtmlElement(div);
        //  }
        }

        var point = radar.tryLocationToPixel(this.latlng, Microsoft.Maps.PixelReference.control);

        if (point) {
            div.style.left = point.x + 'px';
            div.style.top = point.y + 'px';
        }
    };

    var latlng=new Microsoft.Maps.Location(-20.976,-68.709);
    var pictureLabel=new Array();
    var pictureLabelpoi=new Array();
                        latlng=new Microsoft.Maps.Location(-20.97599,-68.70899);
                        pictureLabel[1] = document.createElement("img");
                        pictureLabel[1].src = "https://bestanimations.com/Signs&Shapes/Arrows/animated-green-arrow-down2.gif";
                        pictureLabel[1].id = "img1";

                            marker[1] = new CustomMarker(
                                latlng,
                                map,
                                pictureLabel[1].outerHTML, 
                                "arrowclass img1",
                                '2016-08-09 12:08:14',
                                {
                                    anchorTop:'-8px',
                                    anchorLft:'-8px'
                                }
                            )
                            map.layers.insert(marker[1]);//this line causes the error
}
$('input[type=button]').click( function() {
startm();
});

I am getting this error:

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

-------------- edit to add example -----------

I made a new jsfiddle showing a different example, this one works with no error, I dont know why it's different: https://jsfiddle.net/tfcefsL4/

Answer 1

好的，我发现了错误，我使用了错误的事件。prototype.draw，绘图适用于 Google 地图，它在显示标记（或叠加层）时运行，不适用于 Bing 地图，所以我必须替换 .prototype.onAdd 的事件（对 Bing 也是如此）。

这是更正后的代码：https://jsfiddle.net/2x1nh8pa/3/

CustomMarker.prototype.onAdd = function() {
    // ...code...
}

谢谢 Mike McCaugham 帮我找到它！

如何使用远程 js 文件查找问题 (Bing 地图 API)

How to find what's wrong using a remote js file (Bing Maps API)

javascript

bing-maps