Question

我目前正在尝试学习Bing Maps API，目前正在尝试构建一个包含多个引脚的地图，这些引脚可以悬停以显示带有该引脚数据的信息窗口。目前我遇到了一些问题。如果有人能帮助解决以下几点：

当我鼠标移动时，信息窗口不会被删除？
如何使用我在addPin（）中检索的数据来填充必填信息窗口？
在createInfoBox（）中我希望隐藏任何活动的信息窗口地图被移动，但即使地图不是，这似乎也会被触发移动？
如果有任何改进，我可以告诉我

jsfiddle ：http://jsfiddle.net/kyllle/vpepD/23/和JS

JS

var dealerMap = {        

        createInfoBox: function(infobox) {

            var instance = this,
                pushpin = infobox;

            // Now create infowindows
            var NewWindow = new Microsoft.Maps.Infobox(pushpin.getLocation(), {
                title: 'title',
                offset: new Microsoft.Maps.Point(-3, pushpin.getHeight() - 5),
                zIndex: 999,
                visible: true
            });

            //Display infowindow
            instance.displayInfoBox(NewWindow, pushpin);

            //Hide infowindow if map is moved - currently gets run without moving map
            //Microsoft.Maps.Events.addHandler(dealerMap.myMap, 'viewchange', instance.hideInfoBox(NewWindow));

        },

        displayInfoBox: function(infobox, pin) {

            var instance = this;

            //Show updated infowindow
            dealerMap.myMap.entities.push(infobox);

            //Mouse out handler to remove window
            Microsoft.Maps.Events.addHandler(pin, 'mouseleave', function() {        
                instance.hideInfoBox(NewWindow);
            });
        },

        hideInfoBox: function(infobox) {

            var instance = this;

            console.log('this was called');
            dealerMap.myMap.entities.remove(infobox);

        },

        addPin: function() {

            var instance = this;

            //make $.ajax json call            
            var response = data.dummy;

            //on success make each pin with returned data
            for (var i = 0, len = response.length; i < len; i++) {    

                var responseItem = response[i],
                    pinLocation = new Microsoft.Maps.Location(responseItem.lat, responseItem.long);                       

                //Create new pin
                var NewPin = new Microsoft.Maps.Pushpin(pinLocation, {
                    icon: 'http://www.kylehouston.com/testing/sportscar_' + responseItem.id +'.png',
                    width: 32,
                    height: 37
                });    

                //Push new pin onto map
                this.myMap.entities.push(NewPin);          

                //Event handlers to show and hide requested infowindow information
                Microsoft.Maps.Events.addHandler(NewPin, 'mouseover', function(e) {
                    console.log(this);
                    dealerMap.createInfoBox(e.target);
                });
            }                      
        },

        init: function() {

            var instance = this;

            var mapOptions = {
                credentials: "AvGoKWSuMorGQb5h4UyyatCBGmGzSZe7-dWQMzXt4qqz6mV_WCC5m-paxvQhednd",
                center: new Microsoft.Maps.Location(37.09024, -95.712891),
                zoom: 5,
                enableClickableLogo: false,
                enableSearchLogo: false
            }

            dealerMap.myMap = new Microsoft.Maps.Map(document.getElementById('mapDiv'), mapOptions);

            //now add some pins
            instance.addPin();           



        }

    }

    dealerMap.init();


});

Answer 1

我强烈建议您一次只在地图上显示一个信息框。显示多个信息框可能会挤占地图并导致糟糕的用户体验。它还消耗了更多的资源。更好的方法是创建单个信息框并在每个图钉上重复使用它，以便显示内容。我写了一篇博客文章，说明如何在此处执行此操作：http://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/

在Bing Maps v7中创建多个infowindows并显示特定于pin的数据

1 个答案: