Question

我有一个Bing Map，其中有一组图钉，每个图钉都与InfoBox相关联。我正在使用v7。

我想要一个位于地图之外的链接来显示特定图钉的信息框。怎么办呢？

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 <style type="text/css">
  /* Define a style used for infoboxes */
  .NSIMInfoBox 
  {
   position: absolute;
   border: solid 2px black;
   background-color: White;
   z-index: 1000;
   padding: 5px;
   width: 250px;
   visibility: visible;
  }
  #mapDiv 
    {
    position: relative;
    top: 20;
    left: 20;
    width: 800px;
    height: 800px;
    border: solid 2px #555;
    }
 </style>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">

</script>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>

</script>
<script>
    $(document).ready(function () {
        getMap();
    });

    var pinInfobox = null;
    var map;
    var pin;

    function getMap() {
        map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
            { credentials: "apikey",
                center: new Microsoft.Maps.Location(45.5, -122.5),
                zoom: 10,
                showScaleBar: true,
                mapTypeId: Microsoft.Maps.MapTypeId.road
            });


        //          //Multiple locations
        //          var polygonWithPins = new Microsoft.Maps.EntityCollection();
        var loc1 = new Microsoft.Maps.Location(45.5, -122.5);
        var loc2 = new Microsoft.Maps.Location(45.6, -122.5);

        pin = new Microsoft.Maps.Pushpin(loc1);
        //Microsoft.Maps.Events.addHandler(pin, 'click', displayEventInfo);
        pin.setInfoBox(new InfoBox("<strong>Pushpin Number1!</strong>"));
        map.entities.push(pin)

        var pin2 = new Microsoft.Maps.Pushpin(loc2);
        pin2.setInfoBox(new InfoBox("<strong>Pushpin Number 2!</strong>"));
        map.entities.push(pin2)


    }

        function InfoBox(html) {
            this.div;
            this.html = html;
        }

        InfoBox.prototype.show = function (e) {
            if (this.div == undefined) {
                //Create container div
                this.div = document.createElement("div");
                this.div.className = "NSIMInfoBox";
                this.div.innerHTML = createInfoBox(this.html);
                this.div.style.display = "";
                var mapDiv = document.getElementById('mapDiv');
                mapDiv.appendChild(this.div);
            }

            var pinLocation = map.tryLocationToPixel(e.target.getLocation(), Microsoft.Maps.PixelReference.control);

            this.div.style.left = pinLocation.x + "px";
            this.div.style.top = pinLocation.y + "px";
            this.div.style.visibility = "visible";
            this.div.style.display = "block";
        };

        InfoBox.prototype.hide = function (e) {
            if (this.div != undefined) {
                this.div.style.visibility = "hidden";
            }
        };

        //Extend pushpinclass
        Microsoft.Maps.Pushpin.prototype.setInfoBox = function (infoBox) {
            if (typeof this.infoBox != undefined && this.infoBox != undefined && this.infoBox != null) {
                this.removeInfoBox();
            }

            // Add handlers for mouse events
            this.mouseoverHandler = Microsoft.Maps.Events.addHandler(this, 'click',
            function (e) { infoBox.show(e); }
           );
            this.mouseoutHander = Microsoft.Maps.Events.addHandler(this, 'mouseleave',
            function (e) { infoBox.hide(e); }
           );
        };

        // Extend the Pushpin class to remove an existing InfoBox object
        Microsoft.Maps.Pushpin.prototype.removeInfoBox = function () {
            this.infoBox = null;

            // Remove handlers for mouse events
            Microsoft.Maps.Events.removeHandler(this.mouseoverHandler);
            Microsoft.Maps.Events.removeHandler(this.mouseoutHander);
        }

        function createInfoBox(html) {
            var myHtml;
            myHtml = '<div style="text-align:right; margin-right: 5px;" onclick="closeInfoBox();">x</div>' +
                '<div style="padding: 5px;">' + html + '</div>';

            return myHtml;
        }

        function closeInfoBox() {
            $('.NSIMInfoBox').hide();
        }


</script>
</head>
<body>
    <div id="mapDiv" class="map"></div>
    <span class="click">click me!  - HERE I WANT TO SHOW THE FIRST PIN'S INFOBOX</span>
</body>
</html>

Answer 1

这就是我能够解决这个问题的方法 -

由于我将引脚推入EntityCollection，我能够通过解析集合来引用图钉，然后调用invoke方法以获得我正在寻找的结果：

样品：

            var newpin = map.entities.get(i);
            Microsoft.Maps.Events.invoke(newpin, 'click', '');

Answer 2

我没有试过这个，但我希望它能奏效。基本上，您可以在图钉对象上模拟鼠标事件。

首先，在创建图钉时，请务必通过在图钉选项对象上设置typeName属性来在结果上设置类名。这将允许您通过使用css选择器#mapDiv div ..

来获取生成的div

然后你可以创建一个事件并在div上发送它，这将向地图控件指示它应该显示与图钉相关的信息。既然你正在使用jQuery，我认为这将是一些事情（响应你的链接上的点击事件在地图控件之外）：

// assuming the typeName you used was "foo"
$('#mapDiv div.foo').trigger($.event('mousemove'));

您可能必须尝试在mousemove之前/而不是mousemove发出鼠标悬停。这也是一种潜在方法的一般概念......希望它能在解决方案中产生。

Bing Maps .v7如何引用地图外链接的图钉？

2 个答案: