Question

我目前正在使用Bing地图版本8。我之前在使用第7版。在版本7中绘制图钉时，htmlContent属性与图钉一起发送。这个html内容的作用是图钉包含在div元素中。

var pushpinOptions = {
                htmlContent: "<div  id='container" + siteIndex + "'style='pointer-events: all !important; z-index: 35000; '></div><div id='lines"+siteIndex+"'></div>",
                anchor:new Microsoft.Maps.Point(iconWidth/2,iconHeight/2),
                width: iconWidth,
                height: iconHeight

            };

 var pin = new Microsoft.Maps.Pushpin(latLon, pushpinOptions);

我使用Konva JS来绘制这些用BingMaps绘制的图钉。

 var stage = new Konva.Stage({
        container: 'container' + siteIndex,
        width: width,
        height: height,
        stroke: 'green'
    });

＆＃39;容器＆＃39; + siteIndex，是我在bing地图图钉中设置的div的id，我在konva中使用它在图钉上绘制另一个图像。这是我的要求。我必须用坐标绘制图钉，然后在图钉上绘制一些图像。现在当我因各种原因从v7转到v8时，我遇到了一个问题。

在v8中，htmlContent不会与图钉一起发送，而是发送一个svg图像，除了坐标之外，它还无法识别。

var customHtml = '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle id="myCircle htmlId" cx="25" cy="25" r="20" stroke="orange" stroke-width="4" fill="yellow" /></svg>';

 var pin = new Microsoft.Maps.Pushpin(latLon, {

                icon: customHtml.replace("htmlId",siteIndex.toString()),
                anchor: new Microsoft.Maps.Point(iconWidth/2,iconHeight/2)
            });

现在，我正在寻找的是一种方法，可以使用第三方api绘制图像，绘制坐标或找到我没有使用html内容绘制的图钉，即使用svg图像。当我用

访问id时

document.getElementById("myCircle 0");

我得到了空。

我找过很多不同的第三方apis，比如leafleat js，konva js，Graphics js。但我找不到识别我的图钉的方法。

有没有办法达到我想要的目的？必须有。

Answer 1

Bing Maps V8不支持HTML图钉，因为它们无法在HTML5画布上绘制。使用SVG会在Canvas上呈现，但是没有创建DOM元素，这就是为什么你不能使用document.getElementById。将DOM元素与地图一起使用确实限制了性能，这也是现在使用HTML5画布完成渲染的主要原因。也就是说，即使在V7中使用自定义HTML的方法，所以你可以做document.getElementById来检索图钉并不是一个好方法。如果要为每个图钉分配唯一ID，然后能够检索它，则应使用自定义JavaScript属性或现有元数据属性。例如：

var pin = new Microsoft.Maps.Pushpin(map.getCenter());

pin.metadata = {
    id: 'myCircle 0'
};

map.entities.push(pin);


function getPushpinById(id){
    var pin;

    for(var i=0,len = map.entities.getLength(), i<len;i++){
        pin = map.entities.get(i);

        if(pin.metadata && pin.metadata.id === id){
            return pin;
        }
    }
}

使用此方法可以在您的应用中实现最佳性能。但是，如果您确实想使用自定义HTML来创建图钉，则可以使用自定义叠加层在V8中实现此目的。以下是代码示例：https://msdn.microsoft.com/en-US/library/mt762877.aspx

在绘制图钉后识别图钉 - Bingmaps

1 个答案: