Question

我只是对使用Bing地图感兴趣，所以我认为它会很棒，所以看看他们的一个例子。所以我从微软的样本中获取了完整的源代码，但它无法正常工作。代码错了还是我做错了什么？以下是该网站的链接：http://msdn.microsoft.com/en-us/library/aa907681.aspx

这是我的代码：

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

Answer 1

您粘贴的示例代码正在尝试使用Bing Maps控件的第4版，该版本至少已过期4年。（在复制它的MSDN页面的顶部有一个警告说明）

最新的Bing Maps API是版本7（一年前发布），并且有一套全面的示例脚本，展示了http://www.bingmapsportal.com/ISDK/AjaxV7提供的控件的各种功能

您还可以在http://msdn.microsoft.com/en-us/library/gg427610.aspx

上找到MSDN上的方法参考，开发人员指南和“入门”部分。

我建议您放弃当前的代码，而不是将其重写为版本7。你将来会为自己省去很多麻烦。

Answer 2

http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js没有加载

Answer 3

正如托马斯所说，js不存在，但是here

最重要的是，SetEnd（）函数中存在js问题。您应该在第100行附近添加一个结束括号：

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

function GetDirections() {

有了这个，你就会得到你的地图，就像这个小提琴一样：http://jsfiddle.net/VEETB/

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

Bing地图上下文菜单

3 个答案: