Как я могу отобразить карту Bing на любой странице HTML? - PullRequest
Новая
       33

Как я могу отобразить карту Bing на любой странице HTML?

0 голосов
/ 18 августа 2011

В Bing есть то, что они называют «элементом управления AJAX», которое может динамически вставлять сгенерированные карты в любую веб-страницу. интерактивная демоверсия для элемента управления .

Как я могу использовать этот элемент управления?

Ответы [ 3 ]

3 голосов
/ 18 августа 2011

Ссылка, которую вы упомянули, имеет кнопку Просмотреть HTML внизу, вы можете щелкнуть ее и получить код для отображения на любой веб-странице.Как ниже (который я получил по вашей ссылке): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Map with valid credentials</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      <script type="text/javascript">
      var map = null;

      function getMap()
      {
          map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
      }   
      </script>
   </head>
   <body onload="getMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
   </body>
</html>
1 голос
/ 18 августа 2011

С большим количеством JavaScript?Посмотрите на сайте http://www.bingmapsportal.com/, где имеется достаточно документации.

Есть также много других способов встроить динамическую карту в сайт - посмотрите GIS.stackexchange.com s сравнение библиотек отображения JavaScript .Если у вас есть более конкретные вопросы, мы будем рады помочь на GIS.se.

1 голос
/ 18 августа 2011

См. Демонстрация .

enter image description here

Есть библиотека классов Javascript, доступная на
http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0

Вы должны включить его на свою страницу следующим образом: 

  <script type="text/javascript" 
          src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

А затем вызвать его изнутри javascript следующим образом: 

var map = new Microsoft.Maps.Map(document.getElementById('SDKmap'), 
                                 {credentials: 'Your Bing Maps Key'});

Чтобы получить ключ карт Bing, перейдите на эту страницу .

Вам нужен div с этим идентификатором на вашей HTML-странице, и он должен иметь размер и стилизованную позицию: относительный: 

<div id="SDKmap" style="position:relative; height:400px; width:400px">

Затем вы можете добавить информационные поля и кнопки на эту карту.

Я также создал помощник по javascript, который может извлекать пользовательские атрибуты из элемента div и генерировать карту для вас, вместе с кнопками и инфобоксами. как это: 

  <div id='map3'
       class='map'
       data-mapdata='center: 42.3 -78.0; zoom:7;pushpin:42.323 -78.80; pushpin:42.93 -77.189; pushpin: 41.13 -78.389'></div>

А потом JavaScript: 

        bingMap.displayMap("map3");

Модуль js, содержащий вспомогательный класс, доступен по ссылке jsfiddle.

...