将Bing 6.1转换为7.0

时间:2011-12-10 12:17:12

标签: javascript bing-maps

我使用Bing Maps Api V6.1获得了100%正确工作的代码 但我不想使用最新的api版本(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>

2 个答案:

答案 0 :(得分:1)

您可以尝试查看:http://msdn.microsoft.com/en-us/library/gg427624.aspx

我做了一个小小的小提琴:http://jsfiddle.net/IrvinDominin/nPPqV/1/

但是现在我有一个凭据错误,因为我没有在MS上开发帐户。

EDIT:

新工作版http://jsfiddle.net/IrvinDominin/nPPqV/4/

EDIT:

最终完整工作版本:http://jsfiddle.net/IrvinDominin/nPPqV/5/

答案 1 :(得分: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可能不得不使用pageX和pageY属性,就像这样。

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

文档参考: