Bing Maps / JavaScript - 尝试使用PushPin点击事件打开InfoBox

时间:2013-08-03 20:03:58

标签: jquery asp.net-mvc bing-maps

我正在试验Bing SDK网站上的示例代码,但是我无法让click事件与我在JS .each循环中添加的图钉一起使用,该循环从sql server中提取经度,纬度坐标。我可以让推针显示正常,如果我在循环中将visible设置为true,我可以让InfoBox显示正常,但如果我在循环中将visible属性设置为false,然后尝试将visible设置为true图钉点击事件没有任何反应。请指教,谢谢。

  <script type="text/javascript">

      $(document).ready(function () {

        var map = null;
        var pinInfobox = null;

        function LoadMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: "Aq85qFzkJkdfauSc1nXq3IATrqgPGN77_MBhghypyJ94ygTElWHSHYv3WXYZT-3E"} );
        }

        function displayInfobox(e) {
            defaultInfobox.setOptions({ visible: true });
        }

        LoadMap();

        var url = "/Job/GetLocations";
        $.getJSON(url, null, function (data) {
            $.each(data, function (index, LocationData) {
                var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { text: '' });                                  
                pushpin.setLocation(new Microsoft.Maps.Location(LocationData.Latitude, LocationData.Longitude));               

                var Route = LocationData.PickupCity + ' to ' + LocationData.DeliveryCity;
                var Details = 'Pays $' + LocationData.Payment + '<br>' + 'Pickup ' + LocationData.PickupHour + LocationData.PickupMinute + '<br>' + 'Deliver ' + LocationData.DeliveryHour + LocationData.DeliveryMinute;;
                var Content = '<a href="http://www.google.com">Google</a>';
                var infoboxOptions = { title: Route, description: Details, htmlContent: Content };
                var defaultInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(LocationData.Latitude, LocationData.Longitude), infoboxOptions);                    
                Microsoft.Maps.Events.addHandler(pushpin, 'click', displayInfobox);
                map.entities.push(pushpin);
                map.entities.push(defaultInfobox);                                     

            });
            map.setView({ zoom: 7, center: new Microsoft.Maps.Location(34.470639154314995, -118.55275198817253) });
        });

      });

  </script>

1 个答案:

答案 0 :(得分:0)

问题在于我没有使用集合作为引脚和信息框。

var infoboxLayer = new Microsoft.Maps.EntityCollection();
var pinLayer = new Microsoft.Maps.EntityCollection();