2009-11-17 7 views
5

Mi código hace un .pantolatlong luego un .showinfobox¿Cómo centrar y mostrar un cuadro de información en los mapas Bing?

El cuadro de información no aparece, a menos que elimine el pantolatlong. Supongo que lo está deteniendo. Traté de agregarlo al evento endpan, pero eso no funcionó.

¿Cuál es la forma más simple de desplazarse a una chincheta y mostrar la infobox para ello?

Estaba usando setcenter, pero descubrí que algunas veces setcenter sartenes, y esto lo rompe.

Respuesta

4

Después de algunas google loco, se me ocurrió la solución, y lo voy a compartir aquí, así que es de esperar que otros no pueden tener el dolor que he pasado.

He creado y encendido mi mapa bing utilizando soluciones javascript, sdk o iframe puros. En mi código, genero el javascript para agregar todos los pines que quiero al mapa, y lo inyecto usando una etiqueta asp.net.

Si se llama al método setCenter() en su mapa de Bing, que se supone que es fijado al instante el mapa, sorpresa sorpresa, a las coordenadas que especifique. Y lo hace ... la mayor parte del tiempo. Ocasionalmente, sin embargo, decide desplazarse entre los puntos. Si haces un SetCenter, seguido de un ShowInfoBox, funcionará muy bien, a menos que decida hacer una panorámica.

¿La solución? Siendo los grandes programadores que somos, nos sumergimos en el SDK, y revela que hay eventos en los que podemos conectarnos para lidiar con estos. Hay un evento onendpan, que se desencadena después de que se completa una panorámica. También hay un evento de cambio de vista, que se activa cuando el mapa salta.

Así que enganchamos a estos eventos y tratamos de mostrar el cuadro de información de nuestra forma de marcador ... pero no ocurre nada. Por qué no?

Tienes que esperar unos milisegundos para recuperar el aliento, por razones desconocidas, cuando se convoque el evento. Usar un setTimeout con 10 milisegundos parece estar bien. Tu caja aparecerá genial después de esto.

El siguiente problema es que solo desea que aparezca cuando se desplaza a través de lo que utilizó para hacer deslizar entre sus marcadores (en mi caso, una tabla con métodos onclick). Creo/destruyo los manejadores de eventos sobre la marcha, aunque hay otras opciones como usar una variable global para rastrear si el usuario está haciendo un paneo, o si el sistema está haciendo paneos en respuesta a un clic.

Finalmente, tiene el único error que surge de esto. Si hace clic en un lugar de su lista y salta/avanza a esa ubicación, el cuadro de información se mostrará bien. Sin embargo, si el usuario lo descarta, vuelve a hacer clic en el elemento de la lista, el mapa no se mueve y, por lo tanto, no se desencadenan eventos.

Mi solución a esto es para detectar si el mapa se movió o no, mediante el registro de su larga/lat, y utilizando otro método setTimeout, detectar si han cambiado de 100 ms después. Si no lo hicieron, muestre el cuadro de información.

Hay otras cosas que necesita hacer un seguimiento, ya que no hay forma de que pueda ver pasar los parámetros a los manejadores de eventos, así que utilizo variables javascript globales para esto: debe saber qué forma de marcador está mostrando, y También haga un seguimiento de las coordenadas cartográficas anteriores antes de verificar si han cambiado.

Me llevó algo de tiempo armar todo esto, pero parece funcionar.Aquí está mi código, algunas secciones se eliminan:

// An array of our pins to allow panning to them 
var myPushPins = []; 

// Used by the eventhandler 
var eventPinIndex; 
var oldMapCenter; 

// Zoom in and center on a pin, then show its information box 
function ShowPushPin(pinIndex) { 
    eventPinIndex = pinIndex; 
    oldMapCenter = map.GetCenter(); 
    map.AttachEvent("onendpan", EndPanHandler); 
    map.AttachEvent("onchangeview", ChangeViewHandler); 
    setTimeout("DetectNoMapChange();", 200); 

    map.SetZoomLevel(9); 
    map.SetCenter(myPushPins[pinIndex].GetPoints()[0]); 

} 


function EndPanHandler(e) { 
    map.DetachEvent("onendpan", EndPanHandler); 

    setTimeout("map.ShowInfoBox(myPushPins[eventPinIndex]);", 10); 

} 

function ChangeViewHandler(e) { 
    map.DetachEvent("onchangeview", ChangeViewHandler); 

    setTimeout("map.ShowInfoBox(myPushPins[eventPinIndex]);", 10); 

} 

function DetectNoMapChange(centerofmap) { 

    if (map.GetCenter().Latitude == oldMapCenter.Latitude && map.GetCenter().Longitude == oldMapCenter.Longitude) { 
     map.ShowInfoBox(myPushPins[eventPinIndex]); 
    } 
} 
3

Aquí está otra manera:

function addPushpin(lat,lon,pinNumber) { 
    var pinLocation = new Microsoft.Maps.Location(lat, lon); 

    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), { text: pinNumber.toString() }); 

    pinInfobox = new Microsoft.Maps.Infobox(pinLocation, 
      { title: 'Details', 
       description: 'Latitude: ' + lat.toString() + ' Longitude: ' + lon.toString(), 
       offset: new Microsoft.Maps.Point(0, 15) 
      }); 


    map.entities.push(pinInfobox); 
    map.entities.push(pin); 

    pin.setLocation(pinLocation); 
    map.setView({ center: pinLocation}); 
} 
Cuestiones relacionadas