Bing Maps .v7 Как ссылаться на кнопки со ссылками за пределами карты? - PullRequest
Новая
       45

Bing Maps .v7 Как ссылаться на кнопки со ссылками за пределами карты?

0 голосов
/ 03 сентября 2011

У меня есть карта 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>

Ответы [ 2 ]

3 голосов
/ 03 октября 2011

Вот как я смог решить эту проблему -

Поскольку я вставил контакты в коллекцию EntityCollection, я смог ссылаться на метку, проанализировав коллекцию, а затем вызвав метод invoke, чтобыполучить результат, который я искал:

Образец: 

            var newpin = map.entities.get(i);
            Microsoft.Maps.Events.invoke(newpin, 'click', '');
0 голосов
/ 26 сентября 2011

Я не пробовал, но надеюсь, что это сработает.По сути, вы можете имитировать события мыши над объектом канцелярской кнопки.

Во-первых, при создании канцелярской кнопки обязательно укажите имя класса в результате, установив свойство typeName в объекте параметров метки.Это позволит вам получить полученный div с помощью селектора css #mapDiv div.

Затем вы можете создать событие и отправить его в div, который укажет элементу управления картой, что он должен отображатьсяинформация, связанная с канцелярской кнопкой.Поскольку вы используете jQuery, я думаю, что это будет что-то вроде (в ответ на событие щелчка по вашей ссылке, находящееся вне элемента управления картой): 

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

Возможно, вам придется попробовать выдатьнаведение мыши до / вместо перемещения мыши.Также это общее представление о потенциальном подходе ... надеюсь, это даст решение.

...