Как центрировать и показать инфобокс в картах Bing? - PullRequest
Новая
       52

Как центрировать и показать инфобокс в картах Bing?

5 голосов
/ 17 ноября 2009

Мой код выполняет .pantolatlong, затем .showinfobox

Информационное окно не появляется, если я не уберу pantolatlong. Я предполагаю, что это останавливает это. Я попытался добавить его в событие endpan, но это не сработало.

Как проще всего перемещаться по кнопке и отображать для нее инфобокс?

Я использовал setcenter, но обнаружил, что иногда setcenter перемещается, и это ломает его

Ответы [ 2 ]

4 голосов
/ 23 ноября 2009

После некоторого безумного поиска в Google, я придумал решение и поделюсь им здесь, чтобы, надеюсь, у других не было печали, через которую я прошел.

Я создал и заполнил свою карту Bing, используя чистый JavaScript, без SDK или решений iframe. В моем коде я генерирую javascript для добавления всех желаемых выводов на карту и вставляю его, используя метку asp.net.

Если вы вызываете метод setCenter () на своей карте Bing, предполагается, что он мгновенно установит на карту, к удивлению, выбранные вами координаты. И это делает ... большую часть времени. Тем не менее, иногда он решает панорамировать между точками. Если вы сделаете SetCenter, а затем ShowInfoBox, он будет отлично работать, если не решит панорамировать.

Решение? Будучи великими программистами, мы погружаемся в SDK, и это показывает, что есть события, которые мы можем подключить, чтобы справиться с ними. Существует событие onendpan, которое запускается после завершения панорамирования. Существует также событие onchangeview, которое срабатывает, когда карта прыгает.

Итак, мы подключаемся к этим событиям и пытаемся отобразить инфобокс для нашей формы канцелярской кнопки ... но ничего не происходит. Почему нет?

Вы должны дать ему несколько миллисекунд, чтобы перевести дыхание, по неизвестным причинам, когда вызывается событие. Использование setTimeout с 10 миллисекундами, кажется, хорошо. После этого ваша коробка будет отлично выглядеть.

Следующая проблема заключается в том, что вы хотите, чтобы он появлялся только тогда, когда он перемещается через все, что вы использовали, чтобы переключаться между вашими кнопками (в моем случае это таблица с методами onclick). Я создаю / уничтожаю обработчики событий на лету, хотя есть и другие варианты, такие как использование глобальной переменной для отслеживания панорамирования пользователя или панорамирования системы в ответ на щелчок.

Наконец, у вас есть одна ошибка, которая возникает из этого. Если вы щелкнете по месту в вашем списке, и он перейдет / переместится в это место, информационный блок отобразится нормально. Однако, если пользователь отклоняет его, затем снова нажимает на элемент списка, карта не перемещается и, следовательно, никакие события не инициируются.

Мое решение для этого состоит в том, чтобы определить, была ли карта перемещена или нет, записав ее long / lat и используя другой метод setTimeout, обнаружив, изменились ли они через 100 мс. Если они этого не сделали, отобразите информационный блок.

Есть и другие вещи, которые вам нужно отслеживать, поскольку я не вижу способа передать параметры обработчикам событий, поэтому я использую для этого глобальные переменные javascript - вы должны знать, какую фигуру кнопки вы отображаете, а также отслеживайте предыдущие координаты карты, прежде чем проверять, не изменились ли они.

Мне потребовалось время, чтобы собрать все это вместе, но, похоже, это сработало. Вот мой код, некоторые разделы удалены: 

// 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 голосов
/ 04 ноября 2012

Вот еще один способ: 

    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});
}
...