绘制图钉后识别图钉-Bingmaps

Question

我目前正在使用Bing地图版本8。我以前使用的是版本7。在版本7中打印图钉时，会随图钉一起发送一个htmlContent属性。这个html内容所做的是pushpin包含在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'
});

"container"+siteIndex，是我在bing-maps图钉中设置的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绘制图像，该api在坐标上绘制，要么找到一种方法来访问我在没有html内容的情况下绘制的图钉，即使用svg图像。当我使用访问id时

document.getElementById("myCircle 0"); 

我变空了。

我已经寻找了许多不同的第三方api，如leafleatjs、konvajs、Graphicsjs。但我找不到识别我的图钉的方法。

有没有办法实现我的愿望？肯定有。

Answer 1

Bing Maps V8不支持HTML图钉，因为它们不能在HTML5画布上绘制。使用SVG可以在画布上进行渲染，但没有创建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