Gmaps.map.callback не работает после вызова replaceMarkers с использованием драгоценного камня Gmaps4rails?

Я использую Gmaps4rails и успешно немного заработал, но я немного в тупике. Вероятно, из-за моих начинающих навыков JS. Я пытался следовать примерам в различных вопросах, но я не уверен, где я ошибаюсь.

Когда моя карта загружается, Gmaps.map.callback работает нормально, карта загружается, я нажимаю на маркер, и срабатывает событие прослушивателя.

На мой взгляд:

<% content_for :scripts do %>
<script type="text/javascript">
Gmaps.map.callback = function(){
  for(var i = 0; i < Gmaps.map.markers.length; i++){
    marker = Gmaps.map.markers[i];
    google.maps.event.addListener(marker.serviceObject, 'click', 
      (function(marker){
        return function(){      
      alert(marker.id);
        }
      })(marker)
   )
 }
}
</script>
<% end %>

Это предупредит об идентификаторе маркера из json, созданного в контроллере.

Затем у меня есть функция поиска, которая обновляет местоположение карты и заменяет маркеры. Это вызывается в вызове ajax. Так вот в контроллерах .js.erb делаю так:

Gmaps.map.replaceMarkers(<%= raw @json %>);

Вроде все нормально, у меня карта загружается с новыми маркерами, но даже слушатель на маркерах не работает.

Итак, мой вопрос: как мне заставить эти новые маркеры иметь прослушиватель для события щелчка. Нужно ли как-то сбрасывать обратный вызов? Я думаю, что он должен запуститься до загрузки карты, но в этом случае я не перезагружаю карту, а просто заменяю маркеры.


person M Kessler    schedule 31.01.2013    source источник
comment
обратный вызов не должен запускаться каждый раз при добавлении маркеров. Просто   -  person apneadiving    schedule 01.02.2013
comment
@apneadiving не уверен, что в вашем ответе что-то обрезалось. Как привязать событие слушателя к маркерам после вызова replaceMarkers?   -  person M Kessler    schedule 01.02.2013


Ответы (2)


Извлеките свой метод, чтобы использовать его повторно:

Gmaps.map.listen_to_markers = function(markers){
  for(var i = 0; i < markers.length; i++){
    marker = markers[i];
    google.maps.event.addListener(marker.serviceObject, 'click', 
      (function(marker){
        return function(){      
          alert(marker.id);
        }
      })(marker)
   )
 }
}

Gmaps.map.callback = function(){
  Gmaps.map.listen_to_markers(Gmaps.map.markers);
}

И всякий раз, когда вы заменяете маркеры:

var new_markers = <%= raw @json %>;
Gmaps.map.replaceMarkers(new_markers);
Gmaps.map.listen_to_markers(new_markers);
person apneadiving    schedule 01.02.2013
comment
Это прекрасно работает. Если бы у меня было больше репутации, я бы проголосовал и за вас. Я пытался что-то похожее на это, но не мог сделать это правильно. Это также дает мне больше понимания того, как это работает. Огромное спасибо. - person M Kessler; 03.02.2013

Откажитесь от «content_for», «Gmaps.map.callback» и т. д. Оставьте buildMap(<%=raw @hash.to_json %>) в файле представления.

В файле coffeescript вставьте свою работу после строки кода handler.fitMapToBounds();.

Например, щелкните элемент панели навигации и активируйте функцию щелчка по определенному маркеру, чтобы открыть информационное окно.

В файле .html.erb

a href="javascript:void(0)" class="mapEventName" id="<%= i %>"><%= event.event_name %>

В файле .js.coffee

$(".mapEventName").on "click", ->
  i = $(this).attr("id")
  marker = markers[i]
  alert(marker.getServiceObject().getPosition().toString())
  google.maps.event.trigger marker.getServiceObject(), "click"

> "
person MelC    schedule 02.12.2013