视图

Question

我的应用中有一个 属性搜索栏 ，用户搜索城市中的属性以及属性的位置在地图上填充 Gmaps4rails gem。搜索栏中的城市名称为 自动填充 typeahead.js

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

案例1： 当提供城市名称时。

案例2： 未提供城市名称时。

如何在 案例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

会很棒

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

视图

控制器

1 个答案: