Отображение текущего местоположения с помощью Google Адресов

Question

Я использовал этот пример кода ниже, чтобы показать поиск автозаполнения для Google Адресов. В настоящее время он по умолчанию использует текущее местоположение в Сиднее, Австралия.

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Я в настоящее время собирает местоположение пользователя, как широта и долгота:

schema.rb

create_table "users", force: :cascade do |t| 
    t.datetime "created_at", null: false 
    t.datetime "updated_at", null: false 
    t.float "latitude" 
    t.float "longitude" 
    end 

Как изменить то, что я предполагаю, что эта часть (не знаю, почему есть два набора координат)

var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-33.8902, 151.1759), 
    new google.maps.LatLng(-33.8474, 151.2631)); 
map.fitBounds(defaultBounds); 

по умолчанию для текущего местоположения моего пользователя?

Answer 1

Я построил аналогичное решение для этого в Rails. В основном я делаю запрос ajax к методу в моем контроллере rails и возвращаю запись пользователя как JSON, которую можно использовать для настройки нашей карты. Я адаптировал код в соответствии с вашими конкретными потребностями. начало

Давайте путем создания отдельного файла Js под трубопроводом активов:

Место следующие под /app/assets/javascripts/gmap.js

var worldMap = { 
    init: function(){ 
     // fetch our user record for lat/long 
     $.ajax({ 
     url: '/user/location', 
     dataType: 'json', 
     success: function(data){ 
      worldMap.lat = data.latitude; 
      worldMap.lng = data.longitude; 
      worldMap.setupMap(); 
     } 
     }); 
    }, 
    setupMap: function(){ 
     // we now have user location loaded so build map 
     worldMap.map = new google.maps.Map(document.getElementById("map"), { 
     zoom: 3, 
     center: { 
      lat: worldMap.lat, 
      lng: worldMap.lng 
     } 
     }); 

     // now lets add autocomplete search 
     var searchbox = (document.getElementById('search-controls')); 
     var input = document.getElementById('pac-input'); 
     worldMap.map.controls[ google.maps.ControlPosition.LEFT_TOP ].push(searchbox); 

     var autocomplete = new google.maps.places.Autocomplete(input); 
     autocomplete.bindTo('bounds', worldMap.map); 

     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     var place = autocomplete.getPlace(); 
     if (!place.geometry) { return; } 

     // center map on chosen location 
     if (place.geometry.viewport) { 
      worldMap.map.fitBounds(place.geometry.viewport); 
     } else { 
      worldMap.map.setCenter(place.geometry.location); 
      worldMap.map.setZoom(17); 
     } 
     }); 
    } 
    } 

Тогда мы можем назвать нашу новую карту установка кода после загрузки DOM, добавьте в /app/assets/javascripts/application.js:

window.onload = function(){ 
    worldMap.init(); 
} 

Теперь мы можем установить наши маршруты, добавьте эту строку в /config/routes.rb:

get 'user/location', :controller => 'users', :action => 'user_location', :as => 'user_latlng' 

Затем, наконец, добавить метод к нашим пользователям контроллера /app/controllers/users_controller.rb:

def user_location 
    @user = User.select(:latitude, :longitude).where(id: current_user.id).limit(1) 
    render json: @user.first 
end 

на ваш взгляд, вы хотите иметь окно поиска и отображения DIV, что наш JS ищет:

<div id="search-controls" class="controls"> 
    <input type="text" id="pac-input" placeholder="Search" /> 
</div> 

<div id="map"></div>