Question

我正在使用最新版本的Gmaps4Rails和Ruby on Rails应用程序。我可以正确显示带有标记的地图，但我不知道如何与地图互动。

我在页面右侧有一个地址列表，左边有一个谷歌地图。谷歌地图显示页面右侧列出的所有地址。一旦我们获得超过20个地址，当查看页面右侧的列表时，很难确定标记在地图上的位置！

当用户点击页面右侧的相关地址时，是否可以制作地图中心并弹出标记的气球？

_map.js.erb

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

<script language="javascript" type="text/javascript">
  handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  });
</script>

index.html.haml

.map-wrapper
  #map
  .large-3.columns.search_box
    %h4 Addresses

    .large-12.columns
      = link_to 'Add Location', new_location_path, class: 'new_record_button'
      = form_for locations_path, method: 'get' do |f|
        = text_field_tag :search, params[:search]
        = f.submit 'search', class: 'search_button', name: nil

    .large-12.columns.location
      - @locations.each do |location|
        .location_record
          = link_to location.name, '#', :onclick => 'aaabbb(marker[1]);'
          .address_info
            = location.address
            %br/
            #{location.city}, #{location.state}. #{location.zip}

= raw render 'map.js'

控制器

def index
  @locations = Location.search(params[:search]).order('created_at desc')

  set_gmap_markers
end

单击地址时居中地图并显示气球

0 个答案: