Bing Maps API v8 - 고정 핀 SVG URI 이미지

Question

텍스트와 작은 URI 데이터 이미지를 결합하는 맞춤 bing 맵 v8 API 고정 핀을 만들려고하는데 'Uncaught InvalidStateError :'에 'drawImage'를 실행하지 못했습니다. CanvasRenderingContext2D ': 제공된 HTMLImageElement가'broken '상태입니다.' 브라우저 콘솔에서 오류가 발생했습니다. 어떤 아이디어?

MapOptions = { credentials: 'mycredentials', mapTypeId: Microsoft.Maps.MapTypeId.road, zoom: 10, showMapTypeSelector: true, enableInertia: false, enableClickableLogo: false, disableKeyboardInput: true, navigationBarMode: navigationBarMode.minified, showLocateMeButton: true }; 

map = new Microsoft.Maps.Map(document.getElementById("MapDIV"), MapOptions); 

LayerShapes = new Microsoft.Maps.Layer(); 
LayerShapes.setZIndex(101); 

map.layers.insert(LayerShapes); 

var svgTemplate = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"> <p>TEXT</p> {htmlContent} </div></foreignObject></svg>'; 
var customHtml = ' <image width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAcCAYAAACUJBTQAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQbECUudScMXAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAACGUlEQVRIx+3Wy2sTURTH8e/NTDIzaZMxadMWhyBUSheiiyo+QPpHuHIhdOfSP8GlbkXEhTv/gNau3LgRurEIUqlWU2ubh7evPEg6NjOZJHNdlIgLo11YRcj5A84Hfpx7zxFKKcUJlw7gOM6JAVLKIwTg4avbfxy4c/UJABH+Qg2QAfKfI98f48vc/CCuATJA/iEilFKq3/q98XTk2I0W5qp916/41SHhOM6xoIW5KlLK/t/K6oNbwlAdknELYSZpxTMkxrO4XoCUUv0O6gHlYkjHWxF+yyWTsKit57CGbbTMGSJWepTh05PIRof3mxLNjNP0Pdp+i9ziIyGl7BtFD1hdOqRdei5ijW2shkSvS8LAJTM2gh4JiWzvFNksFdAsA3s0Ram4TrtZJxnXCLwKWSF+CvWAt89czmffiEQ0gGYZzSuTX3tNx60Q1Pcxwyb67JUL7Jb38VsdojETz2ux8W6JqG6iJaOoGLTr98WP0fWAsZgQ849v8mnZYeriLNinwAup722RsW12cysYiRT62voGwymbbsQgMZREcMD1yzN4nkctrNEV4HbrTKeFKNeOJlFKiXtwV2ganJvKkF8rsvxiEd8P0FSTiXQa2wxJxEz2yl/QA2Mc2Qihq7NdqdE5rJAc2ufsZBbTiIIGXWXTVeCIa0glMQwh8vl7hMDHD5+Zmb7E16ZPtVrFilnsFLY42CngTDhEohbfALpF/s+4JwbyAAAAAElFTkSuQmCC"/> '; 

var PinPos = new Microsoft.Maps.Location(Lat, Lng); 
pin = new Microsoft.Maps.Pushpin(PinPos, { icon: svgTemplate.replace('{htmlContent}', customHtml), width: 32}); 

LayerShapes.add(pin); 

Answer 1

나는 같은 문제에 봉착했습니다. 언로드 된 이미지가있는 압핀 아이콘을 그리기 때문에 발생합니다.

일반적으로 이미지는 압정 아이콘으로 사용하기 전에 JS 코드로 미리로드하는 것이 좋습니다. 내가 대신 당신은 모든 기능을 사용할 수 있습니다

var imageArray = []; 
var imagesFiles = ['home_16.png', 'home_16_done.png', 'not existing.png']; 

    function preLoadImages(callback) { 

     var filesCount = imagesFiles.length; 
     for (var i = 0; i < imagesFiles.length; i++) { 
      var imageObj = new Image(); 
      imageObj.src = '/images/' + imagesFiles[i]; 
      imageObj.name = imagesFiles[i]; 
      imageObj.onload = (function (img) { 
      imageArray.push({ name: img.target.name, object: img.target }); 

      filesCount--; 

      if (filesCount === 0) { 
       if (callback) 
        callback(imageArray); 
      }}); 

      imageObj.onerror = function() { //even image is not loaded 

       filesCount--; 
       if (filesCount === 0) { 
       if (callback) 
        callback(imageArray); 
       }}; 
      } 
    } 


     .... 

     pushpin = new Microsoft.Maps.Pushpin(location, 
     { icon: createCanvasContent(imageArray[i], parameters[]) 
     ..... 

     function createCanvasContent(img, parameters){ 

      var c = document.createElement('canvas'); 
      c.width = img.width + 2; 
      c.height = img.height + 2; 

      var context = c.getContext('2d'); 

      context.fillStyle = bgrcolor; 
      context.fillRect(0, 0, 18, 18); 
      c.style.opacity = '0.8'; 
      //Draw image 
      context.drawImage(img, 1, 0, c.width - 2, c.height - 2); 

      return c.toDataURL(); 
     } 

'SVG'의 캔버스를 사용

배열에 이미지를 미리로드

1. :

   나는이 방법으로 그것을 해결 캔버스 태그 like

   context.textAlign = "center"; 
   context.strokeText(text, x, y); 
   context.fillStyle = 'white'; 
   context.fillText(text, x, y);