Question

我通过appneadiving使用Google Maps for Rails gem，并希望将侦听器添加到已存在的标记中。我想知道如何获取所有标记，我试着查看源代码，但还是想不出来。

我正在使用版本2.1.2和Rails 3.2.14。虽然我最初的问题是关于抓住所有标记，但鉴于我需要做什么，可能没有必要。

我可能应该使用会话以外的名称但在我的应用会话中引用活动会话。每个标记表示在该位置发生的活动，如果您将鼠标悬停在标记上，我只想要显示有关该活动的信息。我还想要一个按钮来加入信息下面的活动，这样它就是一个表格。我已经有了一个表单，用于在点击的任何位置创建活动/标记，但不知道如何在标记上添加回调到事件。它是一个单页面应用程序，这是root.html.erb的根代码的代码。

<script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js'></script>

<script type="application/json" id="bootstrapped_sessions_json">
  { "sessions": <%= Session.all.to_json.html_safe %> }
</script>
<div class="container" style='padding-top: 60px'>
  <div class="row">
    <div class="span8">
      <div style='width: 800px;'>
        <div id="map" style='width: 800px; height: 400px;'></div>
      </div>
    </div>
    <div class="span4">
      <div style="padding-left:10px;">
      Closest users/sessions
    </div>
    </div>
  </div>
</div>

<script type='text/template' id='create_session_template'>
  <form action='<%= api_sessions_url %>' method='POST'>
    <label for='activity_name'>Activity</label>
    <input type='text' name='session[activity]' id='activity_name'>

    <label for='end_time'>End Time</label>
    <input type='time' name='session[end_time]'>

    <input type='hidden' name='session[latitude]' value='<%%= lat %>'>
    <input type='hidden' name='session[longitude]' value='<%%= lng %>'>
    <input type='hidden' name='session[size]' value='1'>
    <input type='hidden' name='authenticity_token' value='<%= form_authenticity_token %>'>

    <input type='submit' value='Broadcast Interest'>
  </form>
</script>

<script type="text/javascript">
  var initialize = function() {
    var data = JSON.parse($("#bootstrapped_sessions_json").html())
    var markerCoordinates = data['sessions'].map(function (coord) {
      return {lat: coord["latitude"], lng: coord["longitude"]}
    });
    var handler = Gmaps.build('Google');
    handler.buildMap({ provider: { minZoom: 1 }, internal: {id: 'map'}}, function() {
      var markers = handler.addMarkers(markerCoordinates);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      handler.map.centerOn({ lat: 40.7356, lng: -73.9906 })
      google.maps.event.addListener(handler.getMap(), 'click', function (e) {
        console.log(e.latLng)
        var lat = e.latLng.ob
        var lng = e.latLng.pb

        renderSessionForm({'lat': lat, 'lng': lng, 'map': handler.getMap()});
      });

    });

  };

  var renderSessionForm = function (options) {
    var lat = options['lat'];
    var lng = options['lng'];
    var map = options['map'];

    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: black; padding: 5px;";

    var myOptions = {
       content: boxText
      ,disableAutoPan: false
      ,maxWidth: 0
      ,pixelOffset: new google.maps.Size(-140, 0)
      ,zIndex: null
      ,boxStyle: { 
        background: "url('tipbox.gif') no-repeat"
        ,opacity: 1
        ,width: "280px"
       }
      ,closeBoxMargin: "10px 2px 2px 2px"
      ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
      ,infoBoxClearance: new google.maps.Size(1, 1)
      ,isHidden: false
      ,pane: "floatPane"
      ,enableEventPropagation: false
    };

    var ib = new InfoBox(myOptions);


    var templateCode = $('#create_session_template').html();
    var templateFn = _.template(templateCode);
    boxText.innerHTML = templateFn({'lat': lat, 'lng': lng})
    ib.open(map);
  }



  window.onload = initialize();
</script>

如何使用Google Maps for Rails获取所有标记

0 个答案: