Bing Maps API v8-图钉SVG URI图像 [英] Bing Maps API v8 - pushpin SVG URI image

问题描述

我正在尝试构建将文本和小的uri数据图像结合在一起的自定义bing maps v8 API图钉，但出现"Uncaught InvalidStateError:无法在'CanvasRenderingContext2D"上执行"drawImage":提供的HTMLImageElement位于断"状态.浏览器控制台上的错误.有什么想法吗?

I'm trying to build a custom bing maps v8 API pushpin combining text and a small uri data image, but I get an 'Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.' error on the browser console. Any ideas?

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);

推荐答案

我遇到了同一问题. 发生这种情况是因为它试图绘制带有未加载图像的图钉图标.

I came across the same issue. It happens because it tries to draw pushpin icons with unloaded images.

通常的想法是在图钉图标中使用图像之前，先在JS代码中预加载图像.

The general idea is to preload images in JS code before using it in pushpin icons.

我通过这种方式解决了:

I solved it by this way:

1. 我将图像预加载到数组中
2. 我用帆布代替了'svg'

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();
        }

您可以使用canvas标签中的所有功能，例如

You can use all features from canvas tag like

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

这篇关于Bing Maps API v8-图钉SVG URI图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！