Udostępnij za pośrednictwem

Multiple Pushpins and Infoboxes in Bing Maps V7

  • Artykuł

In Bing Maps an Infobox (or popup) is just another entity that you can treat just like a pushpin. This gives a lot of flexibility in what can be done with the Infobox class. For example, if you want to mark a point on the map you can simply use an infobox instead of a pushpin. This might be ideal for situations where the point you are marking is very small and the pushpin might be too large to mark the point accurately. With this added flexibility we also end up with some added complexity. Because the infobox class is treated as just another entity it is possible for them to be layered behind other entities. This can result in pushpins appearing overtop of the infobox which is usually less than ideal.

In the most situations we want an infobox to appear when a user clicks on a pushpin and we expect this infobox to appear above everything else. We also expect the content of the infobox to be related to the pushpin we clicked.

To accomplish this, a general best practice is to store the metadata for each pushpin as a property of it, that way when an event is fired on the pushpin you have all the metadata associated with it. You can then use one infobox over and over again and just update the position and content when a pushpin is clicked. This will result in a lot less objects in the DOM which will help to ensure good performance. To keep the infobox above your data an easy thing to do is create two EntityCollections, one for data and the other for infoboxes. Add the data EntityCollection to the map first followed by the Infobox EntityCollection. This will ensure that your data (i.e. pushpin) always show up under your infoboxes.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
          var map = null, infobox, dataLayer;

          function GetMap() {
              // Initialize the map
              map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                         { credentials: "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, offset: new Microsoft.Maps.Point(0, 20) });
              infoboxLayer.push(infobox);

              AddData();
          }

          function AddData() {
              var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, 30));
              pin1.Title = "This is Pin 1";
              pin1.Description = "Pin 1 description";
              Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
              dataLayer.push(pin1);

              var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, -30));
              pin2.Title = "This is Pin 2";
              pin2.Description = "Pin 2 description";
              Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);
              dataLayer.push(pin2);
          }

          function displayInfobox(e) {
              if (e.targetType == 'pushpin') {
                  infobox.setLocation(e.target.getLocation());
                  infobox.setOptions({ visible: true, title: e.target.Title, description: e.target.Description });
              }
          }  
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative;width:600px;height:400px;"></div>
   </body>
</html>

By running this code sample and clicking on a pushpin you will end up with a map similar to this:

clip_image001

Comments

  • Anonymous
    November 26, 2013
    Thanks for this its awsome...... :) :) :)  

  • Anonymous
    March 12, 2014
    For fast responses to questions try using the Bing Maps forums: social.msdn.microsoft.com/.../home If you are creating a Windows Store app then take a look at my free eBook: rbrundritt.wordpress.com/my-book

  • Anonymous
    June 10, 2014
    thank you very much for this concrete and helpfull exemple!

  • Anonymous
    January 21, 2015
    Thank you for the great article. I have a question regarding the events. On IE 11 browser, The mouse click event is only working when we have compatibility mode on. Is that expected behavior for the bing maps? Thanks Nate

  • Anonymous
    February 18, 2015
    Take a look at this blog post for a possible solution for the IE11 issue: rbrundritt.wordpress.com/.../fix-ie11-mouse-events-in-bing-maps-v7

  • Anonymous
    January 06, 2016
    I have 2 click events:

  1. Shows the current user location.(denoted by a pushpin)
  2. Shows the location name in an infobox. (by clicking on the pushpin). Everytime I try to close the infobox, the first click event is triggered and the user location changes. How can I avoid this? Regards