如何使用远程js文件（Bing Maps API）找到问题

Question

这个问题很难解释，因为我不知道该怎么办。

我有一个Bing地图v8使用JavaScript API，它使用许多远程文件。

我需要在地图上显示一些自定义html元素，我不能使用普通的图钉，标记或叠加层来实现，所以我在博客中找到了使用“自定义叠加层”的方式，它的工作正常，它是一个prototipe对象，它有一个发送到API的HTML元素。

不幸的是，它在一些文件中工作，但突然在我最后的代码中给我一个错误，我无法弄清楚如何找到错误，我无法调试它或评论它，因为我不能编辑这些远程文件他们在微软服务器）。

我做这个的jsfiddle显示错误：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(); 
}); 

我收到此错误：

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

----------- ---编辑添加示例-----------

我做了一个新的jsfiddle显示一个dif例如，这个工程没有错误，我不知道它为什么不同：https://jsfiddle.net/tfcefsL4/

Answer 1

好吧，我发现错误，我使用了错误的事件.prototype.draw，为Google地图绘制作品，它运行时标记（或覆盖图）显示，不适用于Bing地图，因此我必须替换.prototype.onAdd的事件（对Bing执行相同操作）。

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

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

谢谢麦克McCaugham的帮助我找到它！