Bing Maps v8 - вызов события нажатия на PushPin

1

Как только я загружаю карту Bing с помощью нескольких pushpin с инфобоксами. Я добавил клик Здесь тег привязки на HTML с конкретным индексом pushpin для отображения инфобокса на javascript click event. Почему-то это не работает для меня.

Я вижу, что событие Invoke поддерживается в v8

Вот скрипка https://jsfiddle.net/pakpatel/9dc4oxfk/2/

var map, infobox;
  map = new Microsoft.Maps.Map('#myMap', {
    credentials: ''
  });

  //Create an infobox at the center of the map but don't show it.
  infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
    visible: false
  });

  //Assign the infobox to a map instance.
  infobox.setMap(map);

  //Create random locations in the map bounds.
  var randomLocations = Microsoft.Maps.TestDataGenerator.getLocations(5, map.getBounds());

  for (var i = 0; i < randomLocations.length; i++) {
    var pin = new Microsoft.Maps.Pushpin(randomLocations[i]);

    //Store some metadata with the pushpin.
    pin.metadata = {
      title: 'Pin ' + i,
      description: 'Discription for pin' + i
    };

    //Add a click event handler to the pushpin.
    Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

    //Add pushpin to the map.
    map.entities.push(pin);
  }


function pushpinClicked(e) {
  //Make sure the infobox has metadata to display.
  if (e.target.metadata) {
    //Set the infobox options with the metadata of the pushpin.
    infobox.setOptions({
      location: e.target.getLocation(),
      title: e.target.metadata.title,
      description: e.target.metadata.description,
      visible: true
    });
  }
}

function showInfoboxByKey(Key) {

  //Look up the  pushpin by gridKey.
  var selectedPin = map.entities.get(gridKey);
  //Show an infobox for the cluster or pushpin.
  Microsoft.Maps.Events.invoke(selectedPin, "click");
}
    <script type='text/javascript'
        src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
        async defer></script>
 <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
 <a href='javascript:void(0);' onclick='showInfoboxByKey(3);'> Click Here </a>
Теги:
bing-maps

1 ответ

0
Лучший ответ

Проблема в том, что вы не передали аргументы какого-либо события при вызове события. Таким образом, обработчик событий не проходит мимо вашего оператора if и, следовательно, ничего не делает. См. Документацию здесь, и вы заметите, что вам необходимо предоставить аргументы события: https://msdn.microsoft.com/en-us/library/mt750279.aspx

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

pushpinClicked({e:{target: selectedPin }});

Я настоятельно рекомендую добавить ваши кнопки в слой и добавить событие click к слою. Это значительно снижает сложность системы событий и имеет небольшую производительность.

  • 0
    Спасибо за ответ. Я обновил свой код для использования, как вы предлагаете. Вот скрипка jsfiddle.net/pakpatel/9dc4oxfk/4
  • 0
    Я задал еще один вопрос, если вы знаете ответ? stackoverflow.com/questions/44461347/...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню