2016-06-09 1 views
0

Besoin d'afficher le groupe de marqueurs (cluster) titre sur la carte bing.Bing cluster besoin d'afficher l'info-bulle & popup

Et je veux afficher tooltip@hover et popup@Cliquez avec cluster est-il une option pour afficher la carte.

J'ai essayé usign code suivant (mais il n'y a pas tooltip et popup sur clic):

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { 
    credentials: 'Your Bing Maps Key' 
}); 
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null); 
var layer = new Microsoft.Maps.Layer(); 
layer.add(pushpin); 
map.layers.insert(layer); 

grâce

Répondre

1

Vous pouvez utiliser la classe Listées pour ce faire. Par chance, je préparais simplement un échantillon pour le faire. C'est parti:

<!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, infobox, tooltip; 
    var tooltipTemplate = '<div style="background-color:white;height:20px;width:150px;padding:5px;text-align:center"><b>{title}</b></div>'; 

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

     //Create a second infobox to use as a tooltip when hovering. 
     tooltip = new Microsoft.Maps.Infobox(map.getCenter(), { 
      visible: false, 
      showPointer: false, 
      showCloseButton: false, 
      offset: new Microsoft.Maps.Point(-75, 10) 
     }); 

     tooltip.setMap(map); 

     //Create an infobox at the center of the map but don't show it. 
     infobox = new Microsoft.Maps.Infobox(map.getCenter(), { 
      visible: false 
     }); 

     //Assign the infobox to a map instance. 
     infobox.setMap(map); 



     //Create random locations in the map bounds. 
     var randomLocations = Microsoft.Maps.TestDataGenerator.getLocations(5, map.getBounds()); 

     for (var i = 0; i < randomLocations.length; i++) { 
      var pin = new Microsoft.Maps.Pushpin(randomLocations[i]); 

      //Store some metadata with the pushpin. 
      pin.metadata = { 
       title: 'Pin ' + i, 
       description: 'Discription for pin' + i 
      }; 

      //Add a click event handler to the pushpin. 
      Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked); 
      Microsoft.Maps.Events.addHandler(pin, 'mouseover', pushpinHovered); 
      Microsoft.Maps.Events.addHandler(pin, 'mouseout', closeTooltip); 

      //Add pushpin to the map. 
      map.entities.push(pin); 
     } 
    } 

    function pushpinClicked(e) { 
     //Hide the tooltip 
     closeTooltip(); 

     //Make sure the infobox has metadata to display. 
     if (e.target.metadata) { 
      //Set the infobox options with the metadata of the pushpin. 
      infobox.setOptions({ 
       location: e.target.getLocation(), 
       title: e.target.metadata.title, 
       description: e.target.metadata.description, 
       visible: true 
      }); 
     } 
    } 

    function pushpinHovered(e) { 
     //Hide the infobox 
     infobox.setOptions({ visible: false }); 

     //Make sure the infobox has metadata to display. 
     if (e.target.metadata) { 
      //Set the infobox options with the metadata of the pushpin. 
      tooltip.setOptions({ 
       location: e.target.getLocation(), 
       htmlContent: tooltipTemplate.replace('{title}', e.target.metadata.title), 
       visible: true 
      }); 
     } 
    } 

    function closeTooltip() { 
     tooltip.setOptions({ 
      htmlContent: ' ', 
      visible: false 
     }); 
    } 
    </script> 
</head> 
<body> 
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div> 
</body> 
</html> 
+0

Merci rbrundritt de l'avoir relu en travaillant pour moi et j'ai tring pour la souris sur le curseur de la souris dans la section du comté en surbrillance et en cliquant sur select county. – bharat