2011-12-09 10 views
0

私はちょうどBing Mapsでの作業に興味を持っていますので、私はそれが優れていると思ったので、その例を見てください。だから私はMicrosoftのサンプルから完全なソースコードを手に入れましたが、うまくいきません。コードが間違っているのですか何か間違っていますか? は、相続人はウェブサイトへのリンク:http://msdn.microsoft.com/en-us/library/aa907681.aspxBing 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> 

答えて

2

貼り付けたサンプルコードは、少なくとも4年前のBing Mapsコントロールのバージョン4を使用しようとしています。 (MSDNページの最上部にこれをコピーした注意点があります)

最新のBing Maps APIはバージョン7(1年以上前にリリースされています)であり、包括的なサンプルセットがありますオーバーhttp://msdn.microsoft.com/en-us/library/gg427610.aspx

で私はあなたの現在のをあきらめ提案、あなたはまた、メソッド参照、開発者ガイド、およびMSDNの「はじめに」のセクションを見つけることができますhttp://www.bingmapsportal.com/ISDK/AjaxV7

から利用できるコントロールのさまざまな機能を実証するスクリプトそれを代わりにバージョン7と書き換えてください。あなたは将来、頭痛の種になるでしょう。

0

トーマスが言うように、jsはありませんが、オンhere

その上、SetEnd()関数にはjsの問題があります。あなたはここで、ライン100の周りにエンドブラケットを追加する必要があります。それに

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

function GetDirections() { 

、あなたがこのフィドルのように、あなたのマップを取得します:http://jsfiddle.net/VEETB/

を不完全な答えを受け入れていません! :P

+0

何らかの理由で、マップが正しく表示されるようになりましたが、メニューが機能しません – parek