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

는 I 내가 BingMaps 플롯이 압정 위에 플롯 Konva JS를 사용했다.

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

'컨테이너'+ siteIndex은 내가 압정 위에 다른 이미지를 플롯 konva에 사용 Bing 맵 압정 세트 DIV의 ID이다. 이것은 나의 요구 사항이다. 좌표로 고정 핀을 플롯하고 고정 핀 위에 일부 이미지를 플롯해야합니다. 이제 여러 가지 이유로 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) 
      }); 

지금, 내가 무엇을 lokking 있습니다 오전하는 방법입니다에 하나 내가 가진 HTML 콘텐츠 즉없이 그려 압정의 접근을 얻는 방법을 찾아 좌표를 통해 플롯 또는 제 3 자 API를 사용하여 플롯 이미지 svg 이미지.

으로 ID에 액세스 할 때

document.getElementById("myCircle 0"); 

null이 반환됩니다.

나는 leafleat js, konva js, Graphics js와 같은 많은 제 3 자 api를 찾았습니다. 그러나 나는 압정을 식별 할 방법을 찾지 못합니다.

내가 원하는 것을 얻을 수있는 방법이 있습니까? 그럴거야.

Answer 1

HTML5 캔버스에서 그릴 수 없기 때문에 HTML 푸시 핀은 Bing Maps V8에서 지원되지 않습니다. 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