Bing 地图 .v7 如何通过地图外部的链接引用图钉？

发布于 2024-12-03 03:20:19 字数 4899 浏览 1 评论 0原文

我有一个 Bing 地图，其中有一组图钉，每个图钉都有关联的信息框。我用的是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>

原文

I have a Bing Map in which I have a set of pushpins, with InfoBoxes associated with each one. I am using v7.

I'd like have a link that is outside the map to display a particular pushpin's Infobox. How can this be done?

example code:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巴黎盛开的樱花 2024-12-10 03:20:19

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

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

示例:

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

This is how I was able to solve this problem -

Since I pushed the pins into the EntityCollection, I was able to reference the pushpin by parsing through the collection, then calling the invoke method in order to get the result I was looking for:

Sample:

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

回复收藏 0 原文

撩人痒 2024-12-10 03:20:19

我还没有尝试过这个，但我希望它能起作用。本质上，您可以模拟图钉对象上的鼠标事件。

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

然后您可以创建一个事件并将其分派到 div 上，这将向地图控件指示它应该显示与图钉关联的信息。由于您使用的是 jQuery，我认为这将类似于（响应地图控件之外的链接上的单击事件）：

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

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

I haven't tried this, but I would hope it can work. Essentially you can simulate the mouse events over a pushpin object.

First, when creating a pushpin, be sure to set a class name on the resulting by setting the typeName property on the pushpin options object. This will allow you get hold of the resulting div by using the css selector #mapDiv div..

Then you can create an event and dispatch it on the div, which will indicate to the map control that it should show the information associated with the pushpin. Since you're using jQuery, I think it would be something along the lines of (in response to the click event on your link that is outside the map control):

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

You might have to try issuing mouseover before/instead of the mousemove. Also this is a general idea of a potential approach ... hopefully it yields in a solution.

回复收藏 0 原文

~没有更多了~