Контекстное меню Bing Maps - PullRequest
Новая
       4

Контекстное меню Bing Maps

0 голосов
/ 09 декабря 2011

Мне просто стало интересно работать с Bing Maps, поэтому я подумал, что это будет здорово, так что посмотрите на один из их примеров.Поэтому я взял полный исходный код из примера Microsoft, но он не работает.Код неправильный или я делаю что-то не так?Вот ссылка на сайт: 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>

Ответы [ 3 ]

2 голосов
/ 10 декабря 2011

Пример кода, который вы вставили, пытается использовать версию 4 элемента управления Bing Maps, которая устарела как минимум на 4 года.(В верхней части страницы MSDN, с которой вы его скопировали, есть предупреждающая заметка)

Последняя версия API Bing Maps - версия 7 (выпущена более года назад), и имеется полный наборпримеров сценариев, демонстрирующих различные функциональные возможности элемента управления, доступные из http://www.bingmapsportal.com/ISDK/AjaxV7

. Вы также можете найти ссылку на метод, руководство разработчика и раздел «Начало работы» на MSDN, по адресу http://msdn.microsoft.com/en-us/library/gg427610.aspx

Я предлагаю вам отказаться от текущего кода и переписать его вместо версии 7.Вы избавите себя от многих головных болей в будущем.

1 голос
/ 09 декабря 2011
0 голосов
/ 09 декабря 2011

Как говорит Томас, JS не там, но здесь

Кроме того, в функции SetEnd () есть проблема с js. Вы должны добавить концевую скобку вокруг строки 100, прямо здесь: 

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

function GetDirections() {

С этим вы получите свою карту, как в этой скрипке: http://jsfiddle.net/VEETB/

И не принимайте неполные ответы! : P

...