Bing Map ShowInfoBox() always shows up in the center of the map?_问答_开发者

Bing Map ShowInfoBox() always shows up in the center of the map?

开发者 https://www.devze.com 2022-12-30 23:28 出处：网络

The javascript code is attached below. Two push pins are added to a Bing map. When they are hovered, the description is shown next to the pins. Two buttons are added and ShowInfoBox(shape) is called on the click event. When the buttons are clicked, for some reason, the Infobox always pops up from the center regardless where the pushpins are. Is this a known bug? Can anyone suggest a workaround?

<!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=6.2"></script>
  <script type="text/javascript">
  var shape;
  var shape1;

 var map = null;
 var infobox = "You can add html codes into the info box or change the style of the info box. You can design and show any info box you want!<br>";

 function ShowInfoBox(sh)
 {
    // The anchor param does not seem to have any effect ???
    map.ShowInfoBox(sh, new VELatLong(sh.Latitude, sh.Longitude), new VEPixel(0, 0));

 }

 function HideInfoBox()
 {
    map.HideInfoBox();
 }


 function GetMap()
 {
    map = new VEMap('myMap');

    map.LoadMap(new VELatLong(47.610377,  -122.200679), 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true);

    shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());


    shape.SetTitle("<h2>Custom Pin0</h2>");
    shape.SetDescription(infobox);

    //Add the 开发者_运维知识库shape the the map
    map.AddShape(shape);

    shape1 = new VEShape(VEShapeType.Pushpin, new VELatLong(47.612379,  -122.201677));

    shape1.SetTitle("<h2>Custom Pin1</h2>");
    shape1.SetDescription(infobox);

    //Add the shape the the map
    map.AddShape(shape1);
 }

 </script>
 </head>
 <body onload="GetMap();">
  <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
  <input type="button" value="1" onclick="ShowInfoBox(shape);">
  <input type="button" value="2" onclick="ShowInfoBox(shape1);">
 </body>
</html>

It isn't that it won't set the anchor, it is that the anchor is stuck on whichever lat/long you clicked first. Try zooming between clicks. You'll see it works.

What you need to do is throw HideInfoBox() in right before the show.

 function ShowInfoBox(sh)
 {
    // The anchor param does not seem to have any effect ???
    HideInfoBox(); 
    map.ShowInfoBox(shape,new VELatLong(sh.Latitude, sh.Longitude));

 }

Just a note: setting your shapes in a global rather than prototyping a GetShapeByTitle() or something will cause you grief if you scale this up. If you can use the VEMap.GetShapeByID(); and the VEShape.GetID(); methods to dynamically retrieve by shape data, it will (in the long run) be easier to deal with.