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

「容器」 + siteIndex，是我在Bing地圖圖釘我在konva用於通過圖釘繪製另一個圖像設置div的ID。這是我的要求。我必須繪製帶有座標的圖釘，然後在圖釘上繪製一些圖像。現在，當我由於各種原因從v7切換到v8時，我面臨着一個問題。

在v8 html內容不是與圖釘一起發送的，而是我們發送的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) 
      }); 

現在，我所lokking的是一種方法，無論是劇情的圖像與第三方API，它繪製了座標或找到辦法讓沒有html內容即我繪製與圖釘的訪問svg圖像。當我訪問與

document.getElementById("myCircle 0"); 

我得到空。

我已經找過很多不同的第三方apis，像leafleat js，konva js，Graphics js。但我找不到識別我的圖釘的方法。

有沒有辦法實現我想要的？必須有。

Answer 1

Bing地圖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