Bing羣組需要顯示工具提示和彈出框

需要在bing地圖上顯示標記堆（cluster）標題。Bing羣組需要顯示工具提示和彈出框

我想顯示tooltip@hover和popup@單擊與cluster沒有任何選項來顯示地圖。

我曾嘗試usign下面的代碼（但對點擊沒有tooltip和popup）：

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);

感謝

來源

2016-06-09 bharat

可以使用的信息框類來做到這一點。幸運的是，我只是把樣品放在一起做這件事。你在這裏：

<!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>

來源

2016-06-10 09:19:36 rbrundritt

謝謝你rbrundritt重播它爲我工作，我有條件在鼠標懸停縣部分突出顯示，並單擊選擇縣。 – bharat

Bing羣組需要顯示工具提示和彈出框

回答

相關問題