Bing Maps上下文菜單

我剛剛對Bing地圖工作感興趣，所以我認爲它會非常出色，所以請看他們的一個示例。所以我從微軟的示例中抓取了完整的源代碼，但它不起作用。代碼是否錯誤或者我做錯了什麼？繼承人的鏈接網站：http://msdn.microsoft.com/en-us/library/aa907681.aspx Bing Maps上下文菜單

這裏是我的代碼：

<html> 
<head> 
<title>Driving Directions in Bing Maps</title> 
<style type="text/css" media="screen"> 
ul, li {margin:0;padding:0;} 

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

ul.pmenu li { position: relative; } 

/* Styles for Menu Items */ 
ul.pmenu li a 
{ 
    display: block; 
    text-decoration: none; 
    color: black; 
    padding: 2px 5px 2px 20px; 
} 

ul.pmenu li a:hover 
{ 
    background:#335EA8; 
    color:white; 
} 
</style> 

<script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script> 
<script> 
var map = null; 
var popuplat; 
var popuplon; 
var startpt = null; 
var endpt = null; 

function OnPageLoad() 
{ 
map = new VEMap('myMap'); 
map.LoadMap(new VELatLong(-33.7939, 151.1093), 10, 'r', false); 
map.SetScaleBarDistanceUnit(VEDistanceUnit.Kilometers); 
map.AttachEvent("oncontextmenu", ShowPopupMenu); 

} 

function ShowPopupMenu(e) 
{ 
popuplat = e.view.LatLong.Latitude; 
popuplon = e.view.LatLong.Longitude; 
var latlong = map.LatLongToPixel(new VELatLong(popuplat,popuplon)); 

var x = map.GetLeft(); 
var y = map.GetTop(); 

var menu = document.getElementById('popupmenu'); 
menu.style.display='block'; //Showing the menu 
menu.style.left = latlong.x + x; //Positioning the menu 
menu.style.top = latlong.y + y; 
} 

function RemovePopupMenu() 
{ 
var menu = document.getElementById('popupmenu').style.display='none'; 
} 

function SetStart() 
{ 
try { 
map.DeletePushpin('start'); 
} catch(err) {} 

startpt = new VELatLong(popuplat, popuplon); 
var pin = new VEPushpin('start', startpt, null, 'Start Here', 'Starting point'); 
map.AddPushpin(pin); 

RemovePopupMenu(); 
} 

function SetEnd() 
{ 
try { 
map.DeletePushpin('end'); 
} catch(err) { 

endpt = new VELatLong(popuplat, popuplon); 
var pin = new VEPushpin('end', endpt, null, 'pin', 'end'); 
map.AddPushpin(pin); 

RemovePopupMenu(); 
} 

function GetDirections() 
{ 
map.GetRoute(startpt, endpt, VEDistanceUnit.Kilometers, VERouteType.Quickest, OnGotRoute); 

RemovePopupMenu(); 
} 

function OnGotRoute(route) 
{ 
var routeinfo="Route info:\n\n"; 
routeinfo+="Total distance: "; 
routeinfo+= route.Itinerary.Distance+" "; 
routeinfo+= route.Itinerary.DistanceUnit+"\n"; 
var steps=""; 
var len = route.Itinerary.Segments.length; 
for(var i = 0; i < len ;i++) 
{ 
    steps+=route.Itinerary.Segments[i].Instruction+" -- ("; 
    steps+=route.Itinerary.Segments[i].Distance+") "; 
    steps+=route.Itinerary.DistanceUnit+"\n"; 
} 
routeinfo+="Steps:\n"+steps; 
alert(routeinfo); 
} 

</script> 
</head> 
<body onload="OnPageLoad();"> 
<div id="myMap" style="position:relative;width:600px;height:400px;"></div> 
<div id="menu"> 
<ul id="popupmenu" class="pmenu"> 
<li><a href="#" onclick='SetStart()'>Set Start</a></li> 
<li><a href="#" onclick='SetEnd()'>Set End</a></li> 
<li><a href="#" onclick='GetDirections()'>Get Directions</a></li> 
</ul> 
</div> 
</body> 
    </html>

來源

2011-12-09 parek

您粘貼的示例代碼正在嘗試使用Bing地圖控件的版本4，該版本至少已過期4年。（請注意，這是在MSDN頁面頂部複製的）

最新的Bing Maps API是版本7（一年前發佈），並且有一套完整的示例腳本由http://www.bingmapsportal.com/ISDK/AjaxV7

演示控制的各種可用的功能，您還可以在http://msdn.microsoft.com/en-us/library/gg427610.aspx

找到一個方法引用，開發人員指南，和MSDN上的「入門」部分，在我建議你放棄你的當前代碼並將其改寫爲版本7。你將來會爲自己節省很多麻煩。

來源

2011-12-09 20:25:19

http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js犯規負載

來源

2011-12-09 17:14:59

正如托馬斯所說，JS是不存在的，但here

在最重要的是，SetEnd（）函數中存在js問題。您應該添加一個尾架左右線100，就在這裏：

 map.AddPushpin(pin); 
     RemovePopupMenu(); 
    } 
} 

function GetDirections() {

有了這一點，你會得到你的地圖，就像這個小提琴：http://jsfiddle.net/VEETB/

不接受不完整的答案！：P

來源

2011-12-09 17:26:54 scumah

由於某些原因，地圖現在可以正確顯示，但菜單不起作用 – parek

Bing Maps上下文菜單

回答

相關問題