Bing Maps Polygon InfoBox

Я установил карту с полигонами по странам на карте и хочу добавить инфобокс, чтобы при наведении некоторой информации будет отображаться для каждой страны.Bing Maps Polygon InfoBox

Я могу получить инфобокс, достаточно легко отображаемый без полигонов, но при назначении их классу PolygonOptions ничего не происходит. Документы говорят, что пока у меня загружен модуль Bing Themes (что я делаю), инфобокс будет отображаться при наведении и нажатии.

Существует, как представляется, нулевая документация/примеры этого, поэтому надеемся, что вы умные люди могут помочь.

Вот некоторые из соответствующих кодов;

var center = this.map.getCenter(); 

    // Create an info box 
    var infoboxOptions = { 
     width: 300, 
     height: 100, 
     title: 'Testing', // sourceItems.data.dataset[0].data[index].key, 
     description: "Visits: 20", // + sourceItems.data.dataset[0].data[index].visits, 
     showPointer: true, 
     titleClickHandler: this.polygonInfo, 
     offset: new Microsoft.Maps.Point(-100, 0), 
     typeName: Microsoft.Maps.InfoboxType.mini, 
     zIndex: 1000 
    }; 
    var polyinfobox = new Microsoft.Maps.Infobox(center, infoboxOptions); 

    var polygonOptions = { 
     fillColor: Microsoft.Maps.Color.fromHex(fillColour), 
     strokeColor: Microsoft.Maps.Color.fromHex(fillColour), 
     strokeThickness: 1, 
     infobox: polyinfobox 
    }; 

    var result = new Microsoft.Maps.Polygon(vertices, polygonOptions);

источник

2014-08-29 PizzaTheHut

Существует образец рабочего кода в интерактивном SDK для управления Bing Maps V7 здесь: http://www.bingmapsportal.com/ISDK/AjaxV7#BingThemeModule6

Обратите внимание, что создание инфобокса для каждой формы очень неэффективно и повредит производительность, если у вас есть много форм. Лучший метод - иметь один инфобокс и динамически заполнять его данные. Я написал сообщение в блоге об этом здесь: http://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/ Если вы хотите использовать этот подход, вот пример кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <title></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, dataLayer, infobox; 

     function GetMap() 
     { 
      map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { 
       credentials: "YOUR_BING_MAPS_KEY" 
      }); 

      dataLayer = new Microsoft.Maps.EntityCollection(); 
      map.entities.push(dataLayer); 

      var infoboxLayer = new Microsoft.Maps.EntityCollection(); 
      map.entities.push(infoboxLayer); 

      infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false }); 
      infoboxLayer.push(infobox); 

      AddData(); 
     } 

     function AddData(){ 
      var polygon = new Microsoft.Maps.Polygon([ 
       new Microsoft.Maps.Location(45, -110), 
       new Microsoft.Maps.Location(65, -90), 
       new Microsoft.Maps.Location(45, -70)]);  

      polygon.Metadata = { 
       title: 'Hello', 
       description: 'World' 
      }; 

      dataLayer.push(polygon); 

      Microsoft.Maps.Events.addHandler(polygon, 'click', displayInfobox); 
      Microsoft.Maps.Events.addHandler(polygon, 'mouseover', displayInfobox); 
     } 

     function displayInfobox(e){ 
      if(e.target){ 
       var point = new Microsoft.Maps.Point(e.getX(), e.getY());  
       var loc = map.tryPixelToLocation(point); 

       infobox.setLocation(loc); 

       var opt = e.target.Metadata; 

       if(opt){ 
        if(e.target.getIcon){ //is pushpin 
         opt.offset = new Microsoft.Maps.Point(0,20); 
        }else{ 
         opt.offset = new Microsoft.Maps.Point(0,0); 
        } 

        opt.visible = true; 
        infobox.setOptions(opt); 
       } 
      } 
     } 
     </script> 
    </head> 
    <body onload="GetMap();"> 
     <div id='mapDiv' style="position:relative; width:600px; height:600px;"></div> 
    </body> 
</html>

источник

2014-08-30 13:46:53 rbrundritt

Ах легенда, спасибо. Я сам взломал что-то подобное, но это намного чище. – PizzaTheHut

Bing Maps Polygon InfoBox

ответ

Смежные вопросы