Gmaps4rails：如何在 Rails 4 中默认设置当前用户在地图上的位置

Question

我的应用程序中有一个属性搜索栏，用户可以在其中搜索某个城市的房产使用 Gmaps4rails gem 在地图上填充属性的位置。搜索栏中的城市名称由typeahead.js[=57=自动填充 ]

一切都很好。我得到了地图上的位置标记。但我的问题是，地图只显示 灰色图像 或 蓝色图像 on not 输入任何城市名称。以下是两种情况下的地图图像。

情况一：给定城市名称时

情况二：未给出城市名称时

如何修改我的代码以在 的地图上显示 当前用户位置 情况 2 不干扰情况 1?

下面是我的代码。

查看

<script src="/assets/typeahead.js" type='text/javascript'></script>
<script src="/assets/typeahead-addresspicker.js" type='text/javascript'></script>
<!-- for search input END -->

<!-- for MAP -->
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
<!-- for MAP END -->

<%= form_tag search_path, :method => :get do %>
  <div class="input-group input-group-sm" id="The-Basics">

    <%= text_field_tag :q, params[:q], class: 'form-control typeahead input-sm', id: 'pac-input', :placeholder => 'Enter City, State or Zip!', :autofocus => true %>

    <span class="input-group-btn">
       <%= submit_tag "Go", :name => nil, class: 'btn btn-primary btn-sm', id: '', data: { no_turbolink: true } %>
   </span>
 </div>
<% end %>

----other content here------

<!-- Gmaps -->
  <div id="rightCol">
  <div id="map-canvas"></div>
<!-- Gmaps End -->

<script type="text/javascript">
//google maps
handler = Gmaps.build('Google',
  {
    markers: {
      clusterer: {
        gridSize: 10, maxZoom:15
      }
    }
  });

handler.buildMap({
    provider: {
      disableDefaultUI: false
      // pass in other Google Maps API options here
    },
    internal: {
      id: 'map-canvas'
    }
  },
  function(){
    markers = handler.addMarkers(<%=raw @hash.to_json %>);

    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    handler.getMap().setZoom(9);
    handler.map.centerOn;
  }
);

// AUTO COMPLETE FOR SEARCH

// mobile address picker
var addressPicker = new AddressPicker({
  autocompleteService: {
    types: ['(cities)'], 
    componentRestrictions: { country: 'US' }
    }
  }
);

$('#pac-input').typeahead(null, {
  displayKey: 'description',
  source: addressPicker.ttAdapter()
});

//  address picker main
var addressPicker = new AddressPicker({
  autocompleteService: {
    types: ['(cities)'], 
    componentRestrictions: { country: 'US' }
    }
  }
);

$('#pac-input2').typeahead(null, {
  displayKey: 'description',
  source: addressPicker.ttAdapter()
});

// AUTO COMPLETE FOR SEARCH END

控制器

def search
@properties = Property.search_available_coming(params[:available_coming]).where(property_active: true).order(property_city: :asc).paginate(:page => params[:page], :per_page => 10)
@hash = Gmaps4rails.build_markers(@properties) do |property, marker|

    marker.lat property.latitude
    marker.lng property.longitude
    marker.picture({
        "url"    => view_context.image_path("Orange-House-Icon.png"),
        "width"  => 50,
        "height" => 50
         })
    marker.infowindow  render_to_string( partial: 'layouts/mapinfo', locals: { property: property.id })
    marker.title "i'm the title"
end
end

Answer 1

您可以进行如下操作：

@hash = Gmaps4rails.build_markers(@properties) do |property, marker|
    marker.lat property.latitude
    marker.lng property.longitude
    marker.picture({
        "url"    => view_context.image_path("Orange-House-Icon.png"),
        "width"  => 50,
        "height" => 50
         })
    marker.infowindow  render_to_string( partial: 'layouts/mapinfo', locals: { property: property.id })
    marker.title "i'm the title"
end
if @hash.empty?
  @hash.push({
    lat: current_user.latitude,
    lng: current_user.longitude
  })
end

---

顺便说一句，将 @hash 重命名为 @array

会很棒