2016-12-09 7 views
1

Пример от Bing map V8 official documentation. По умолчанию инфобокс присваивается false, но в первый раз его отображение.Bing Map V8 Infobox Видимый не работает

  <!DOCTYPE html> 
    <html> 
    <head> 
     <title></title> 
     <meta charset="utf-8" /> 
     <script type='text/javascript' 
       src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script> 
     <script type="text/javascript"> 
     var map, clusterLayer, infobox; 

     function GetMap() { 
      map = new Microsoft.Maps.Map('#myMap', { 
       credentials: 'Bing Map Key' 
      }); 

      //Add an infobox to the map. 
      infobox = new Microsoft.Maps.Infobox(map.getCenter(), { visible: false }); 
      infobox.setMap(map); 

      Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function() { 
       //Create a clustering layer 
       clusterLayer = new Microsoft.Maps.ClusterLayer(createCustomPushpins(100), { 
        clusteredPinCallback: createCustomClusterPushpins, 
        callback: createPushpinList 
       }); 
       map.layers.insert(clusterLayer); 
      }); 
     } 

     function createCustomPushpins(size) { 
      //Generate random pushpins within the map bounds. 
      var pins = Microsoft.Maps.TestDataGenerator.getPushpins(size, map.getBounds()); 

      for (var i = 0; i < size; i++) { 
       //Create a title for each pushpin. 
       pins[i].setOptions({ title: 'Pushpin #' + i }); 

       //Add handler for the pushpin click event. 
       Microsoft.Maps.Events.addHandler(pins[i], 'click', pushpinClicked); 
      } 

      return pins; 
     } 

     function createCustomClusterPushpins(cluster) { 
      //Create a title for the cluster. 
      cluster.setOptions({ 
       title: 'Cluster of ' + cluster.containedPushpins.length + ' pins' 
      }); 

      //Add handler for the cluster click event. 
      Microsoft.Maps.Events.addHandler(cluster, 'click', pushpinClicked); 
     } 

     function pushpinClicked(e) { 
      //Show an infobox when a pushpin is clicked. 
      showInfobox(e.target); 
     } 

     function createPushpinList() { 
      //Create a list of displayed pushpins each time clustering layer updates. 

      if (clusterLayer != null) { 
       infobox.setOptions({ visible: false }); 

       //Get all pushpins that are currently displayed. 
       var data = clusterLayer.getDisplayedPushpins(); 
       var output = []; 

       //Create a list of links for each pushpin that opens up the infobox for it. 
       for (var i = 0; i < data.length; i++) { 
        output.push("<a href='javascript:void(0);' onclick='showInfoboxByGridKey(", data[i].gridKey, ");'>"); 
        output.push(data[i].getTitle(), "</a><br/>"); 
       } 

       document.getElementById('listOfPins').innerHTML = output.join(''); 
      } 
     } 

     function showInfoboxByGridKey(gridKey) { 
      //Look up the cluster or pushpin by gridKey. 
      var clusterPin = clusterLayer.getClusterPushpinByGridKey(gridKey); 

      //Show an infobox for the cluster or pushpin. 
      showInfobox(clusterPin); 
     } 

     function showInfobox(pin) { 
      var description = []; 

      //Check to see if the pushpin is a cluster. 
      if (pin.containedPushpins) { 

       //Create a list of all pushpins that are in the cluster. 
       description.push('<div style="max-height:75px;overflow-y:auto;"><ul>'); 
       for (var i = 0; i < pin.containedPushpins.length; i++) { 
        description.push('<li>', pin.containedPushpins[i].getTitle(), '</li>'); 
       } 
       description.push('</ul></div>'); 
      } 

      //Display an infobox for the pushpin. 
      infobox.setOptions({ 
       title: pin.getTitle(), 
       location: pin.getLocation(), 
       description: description.join(''), 
       visible: true 
      }); 
     } 
     </script> 
    </head> 
    <body> 
     <div id="myMap" style="position:relative; width:600px; height:400px;"></div> 
     <br /> 
     <div id="listOfPins" style="max-height:250px;width:250px;overflow-y:scroll;"></div> 
    </body> 
    </html> 

Согласно официальной документации, мы должны пройти видны ложным, а инстанцирование объекта Википедии (инфобокс = новый Microsoft.Maps.Infobox (map.getCenter() {видна ложь});) Любые предложения, в которых я ошибаюсь?

ответ

2

Странно, попробовал код, указанный в IE11, Edge, Chrome и Firefox. Он работал правильно во всех браузерах, кроме Chrome. Не знаю, почему Chrome действует по-разному. Будет ли команда смотреть на это. Спасибо за сообщение.

+0

есть ли какое-либо событие, чтобы идентифицировать кластер, который не может быть выкопан, поскольку множественные кнопки находятся на одном и том же лате и длинном –

+0

При создании кластеризованных кнопок нажмите кнопку масштабирования. Если карта полностью увеличена, то кластеризованная кнопка, которую вы создаете, не сможет разделиться, поскольку вы полностью увеличены. – rbrundritt

+0

@rbrundritt any Исправлено? – ShaMoh

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