2011-12-10 3 views
0

Bing Maps를 사용하여 100 % 올바르게 작동하는이 코드가 있습니다. Api V6.1 하지만 최신 API 버전 (7.0)을 사용하여 사용하지 않으려합니다. 변환하려면 도움이 필요합니다. . 그래서 누군가가 어디에서 시작할지 또는 어쩌면 자습서와 링크가 있는지에 대한 정보를 얻을 수 있습니다. 감사.Bing 6.1을 7.0으로 변환

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> <title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
ul, li {margin:0;padding:0;} 

ul.pmenu 
{ 
    display: none; 
    position:absolute; 
    margin: 0; 
    padding: 1px; 
    list-style: none; 
    width: 150px; /* Width of Menu Items */ 
    border: 1px solid #ccc; 
    background: #235087; 
    z-index:10; 
} 

ul.pmenu li { position: relative; } 

ul.pmenu li a 
{ 
    display: block; 
    text-decoration: none; 
    color: White; 
    padding: 2px 5px 2px 20px; 
} 

ul.pmenu li a:hover 
{ 
    background:#335EA8; 
    color:white; 
} 
</style> 
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script> 
<script type="text/javascript"> 
var map = null; 
function GetMap() { 
    map = new VEMap('myMap'); 
    map.LoadMap(); 
    map.AttachEvent("onclick", ShowPopupMenu); 
} 
function ShowPopupMenu(e) { 
if (!e.rightMouseButton) { 
    RemovePopupMenu(); 
    return; 
} 

var menu = document.getElementById('popupmenu'); 

menu.style.display = 'block'; //Showing the menu 
menu.style.left = e.clientX + "px"; //Positioning the menu 
menu.style.top = e.clientY + "px"; 
} 

function RemovePopupMenu() { 
document.getElementById("popupmenu").style.display = 'none'; 
} 
</script> 
</head> 
<body onload="GetMap();"> 
<div id="menu"> 
    <ul id="popupmenu" class="pmenu"> 
     <li><a href="#" onclick='RemovePopupMenu(); alert("First");'>First</a></li> 
     <li><a href="#" onclick='RemovePopupMenu(); alert("Second");'>Second</a></li> 
     <li><a href="#" onclick='RemovePopupMenu();'>Exit</a></li> 
    </ul> 
</div> 
<div id='myMap' style="position:relative; width:1000px; height:800px;"></div> 
</body> 
</html> 

답변

0

는 나는 이런 식으로 뭔가 될 것 같아요

var map = null; 
function GetMap() { 
    map = new Microsoft.Maps.Map(document.getElementById("myMap"), {credentials:"Bing Maps Key"}); 
    Microsoft.Maps.Events.addHandler(map, 'click', ShowPopupMenu); 
    Microsoft.Maps.Events.addHandler(map, 'rightclick', RemovePopupMenu); 
} 

편집 :

귀하의 ShowPopupMenu 아마 이런 식으로, 대신에 X 페이지와 페이지 Y 속성을 사용해야합니다.

function ShowPopupMenu(e) { 

var menu = document.getElementById('popupmenu'); 

menu.style.display = 'block'; //Showing the menu 
menu.style.left = e.pageX + "px"; //Positioning the menu 
menu.style.top = e.pageY + "px"; 
} 

문서 참조 :

+0

감사합니다,하지만 그것은 작동하지 않았다 :/ – parek

+1

당신이 무슨 뜻 작동하지 않았다 어떻게, 자바 스크립트 오류, 잘못된 행동, 또는 무엇? 6.1 대신 API 7.0을 사용하도록 참조를 변경 했습니까? –

+0

메뉴가 표시되지 않습니다. 그리고 예. API를 변경했습니다. – parek