绘制图钉后识别它们-Bingmaps [英] Identifying pushpins after plotting them - Bingmaps

问题描述

我目前正在使用Bing地图版本8.我以前使用的是版本7.在版本7中绘制图钉时，会随图钉一起发送htmlContent属性.该html内容的作用是图钉包含在div元素内.

I am currently working with Bing maps version 8 . I was previously working with version 7 . When plotting pushpins in version 7 a htmlContent attribute was sent along with the pushpins. What this html content did was that the pushpin was contained inside the div element .

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绘制的.

I used Konva JS to plot over these pushpins which i plotted with BingMaps.

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

'container'+ siteIndex，是我在bing地图图钉中设置的div的ID，我在konva中用来在图钉上绘制另一个图像.这是我的要求.我必须绘制带有坐标的图钉，然后在图钉上绘制一些图像.现在，由于种种原因我从v7转到v8时，我遇到了一个问题.

'container' + siteIndex, was the id of the div i set in bing maps pushpins which i used in konva to plot another image over the pushpins. This is my requirement . I have to plot a pushpin with coordinates and then plot some images over the pushpins . Now when i shifted from v7 to v8 for various reasons, I am facing an issue .

在v8中，htmlContent不是随图钉一起发送的，而是我们发送了一个svg图像，该图像在绘制后除了坐标之外无法识别.

In v8 htmlContent is not sent with the pushpins, rather we send an svg image which has no way to identify after being plotted other than co-ordinates .

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图像的图钉.当我使用

Now , what i am lokking for is a way to either plot images with a third party api which plots over co-ordinates or find to way to get access of the pushpins i plotted without the html content i.e with svg images. When i access the id with

document.getElementById("myCircle 0"); 

我得到空值.

我一直在寻找许多不同的第三方api，例如leafleat js，konva js和Graphics js.但是我找不到识别我的图钉的方法.

I have looked for many different third party apis like leafleat js, konva js , Graphics js. But i do not find a way to identify my pushpins .

有没有一种方法可以实现我希望的目标?必须有.

Is there a way to achieve what i wish to? There must be.

推荐答案

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

HTML pushpins are not supported in Bing Maps V8 as they can't be drawn on an HTML5 canvas. Using SVG would render on the Canvas but there is no DOM element create, which is why you aren't able to use document.getElementById. Using DOM elements with maps really limits performance and is the main reason why rendering is now done with an HTML5 canvas. That said, even in V7 using the approach of custom HTML in general so you can do document.getElementById to retrieve the pushpins was not a good approach. If you want to assign a unique ID to each pushpin and then be able to retrieve it, you should use a custom JavaScript property, or the existing metadata property. For example:

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/zh- US/library/mt762877.aspx

Using this approach would allow the greatest performance in your app. However, if you really want to use custom HTML to create pushpins, it is possible to achieve this in V8 by using a custom overlay. Here is a code sample: https://msdn.microsoft.com/en-US/library/mt762877.aspx

这篇关于绘制图钉后识别它们-Bingmaps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！