создание нескольких infowindows в Bing Maps v7 и представление данных для вывода

Question

В настоящее время я пытаюсь изучить API Bing Maps и в настоящее время пытаюсь создать карту с несколькими контактами, которые можно навестить, чтобы открыть информационное окно с данными данных контактов , На данный момент у меня проблемы. Если бы кто-нибудь мог помочь со следующими моментами, это было бы замечательно:

1. Когда я нажимал на мышь, информационное окно не удаляется?
2. Как использовать данные, которые я извлекаю в addPin(), для заполнения нужного информационного окна ?
3. В createInfoBox() Я хочу скрыть любое активное информационное окно, когда карта перемещается, но похоже, что она срабатывает, даже если карта не перемещена?
4. Если есть какое-либо улучшение я могу сделать, пожалуйста, дайте мне знать

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/