Identifizieren von Pins nach dem Plotten - Bingmaps

Question

Ich arbeite derzeit mit Bing Maps Version 8. Ich habe vorher mit Version 7 gearbeitet. Beim Plotten von Pushpins in Version 7 wurde ein htmlContent-Attribut zusammen mit den Pushpins gesendet. Was dieser HTML-Inhalt tat, war, dass der Pin innerhalb des div-Elements enthalten war.

Ich habe Konva JS verwendet, um über diese Pins zu zeichnen, die ich mit BingMaps gezeichnet habe.

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

'Container' + Siteindex, war die ID des div i in Bing Maps Stecknadeln gesetzt, die ich in konva verwenden ein anderes Bild über die Stecknadeln plotten. Das ist meine Anforderung. Ich muss einen Pin mit Koordinaten zeichnen und dann einige Bilder über die Pins zeichnen. Jetzt, als ich aus verschiedenen Gründen von v7 auf v8 wechselte, stehe ich vor einem Problem.

In v8 htmlContent wird nicht mit den Pins gesendet, sondern wir senden ein Svg-Bild, das nach dem Plotten nicht anders als Koordinaten identifiziert werden kann.

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

Nun, was ich für mich lokking ist ein Weg, um entweder Plot Bilder mit einem Dritten api, die Plots über Koordinaten oder auf Weg finden, den Zugang des Push-Pins zu bekommen i ohne den HTML-Inhalt, dh aufgetragen mit Svg Bilder. Wenn ich auf die ID mit

document.getElementById("myCircle 0"); 

zugreifen, bekomme ich null.

Ich habe nach vielen verschiedenen Apis von Drittanbietern wie leafleat js, konva js, Graphics js gesucht. Aber ich finde keine Möglichkeit, meine Pins zu identifizieren.

Gibt es eine Möglichkeit zu erreichen, was ich möchte? Da muss sein.

Answer 1

HTML-Push-Pins werden in Bing Maps V8 nicht unterstützt, da sie nicht auf einem HTML5-Zeichenbereich gezeichnet werden können. Die Verwendung von SVG würde im Canvas-Bereich rendern, aber es gibt kein DOM-Element create, weshalb Sie document.getElementById nicht verwenden können. Die Verwendung von DOM-Elementen mit Maps begrenzt die Leistung und ist der Hauptgrund, warum das Rendern jetzt mit einem HTML5-Canvas durchgeführt wird. Das heißt, sogar in V7 mit dem Ansatz von benutzerdefinierten HTML im Allgemeinen, so dass Sie tun können, document.getElementById zum Abrufen der Push-Pins war kein guter Ansatz. Wenn Sie jedem Pin eine eindeutige ID zuweisen und diese dann abrufen möchten, sollten Sie eine benutzerdefinierte JavaScript-Eigenschaft oder die vorhandene Metadateneigenschaft verwenden. Zum Beispiel:

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

Mit diesem Ansatz würde die größte Leistung in Ihrer App ermöglichen. Wenn Sie jedoch wirklich benutzerdefinierte HTML zum Erstellen von Pins verwenden möchten, können Sie dies in V8 mithilfe eines benutzerdefinierten Overlays erreichen. Hier ist ein Codebeispiel: https://msdn.microsoft.com/en-US/library/mt762877.aspx