2015-10-06 155 views

回答

0
  1. 安裝嘰嘰喳喳的寶石:gem 'twitter'

創建控制器:

class Api::MapController < ApplicationController 
    def new 
    end 

    def show 
    client = Twitter::REST::Client.new do |config| 
     config.consumer_key  = "your_consumer_key" 
     config.consumer_secret  = "your_consumer_secret" 
     config.access_token  = "your_access_token" 
     config.access_token_secret = "your_access_token_secret" 
    end 

    #center: {lat: -34.397, lng: 150.644}, 
    latitude = params[:lat] 
    longitude = params[:lng] 

    #str = '31.515181,74.345034,10km' 
    str = "#{latitude.to_s},#{longitude.to_s},10km" 

    @search_results = client.search('', geocode: str).take(15) 

    render json: @search_results 
end 
end 

可以設置0公里,如果需要1個結果。並通過查詢特定結果client.search('Coffe Shops', geocode: str).take(15)方法

最後補充此Javascript谷歌地圖上添加並顯示標記

computed_latitude = 150.644; 
computed_longitude = -34.397; 

map = null; 

function initMap() { 
    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      var pos = { 
       lat: position.coords.latitude, 
       lng: position.coords.longitude 
      }; 
      computed_latitude = pos.lat; 
      computed_longitude = pos.lng; 

      map = new google.maps.Map(document.getElementById('map'), { 
       center: {lat: computed_latitude, lng: computed_longitude}, 
       zoom: 6 
      }); 

      // fetch tweets 
      console.log('Fetching tweets now...'); 
      $.ajax({ 
       url: "http://localhost:3000/api/map/show", // Route to the Script Controller method 
       type: "GET", 
       dataType: "json", 
       data: {lat: computed_latitude, lng: computed_longitude}, // This goes to Controller in params hash, i.e. params[:file_name] 
       complete: function() { 
       }, 
       success: function (data, textStatus, xhr) { 
        console.log('Got the tweets... Drawing marker.'); 
        var marker = []; 
        for (var i = 0; i < data.length; i++) { 
         if (!($.isEmptyObject(data[i].geo))) { 
          var computed_latitude = data[i].geo.coordinates[0]; 
          var computed_longitude = data[i].geo.coordinates[1]; 
          myLatlng = {lat: computed_latitude, lng: computed_longitude}; 
          marker[i] = new google.maps.Marker({ 
           position: myLatlng, 
           map: map, 
           title: data[i].text 
          }); 
          var id = data[i].id_str; 
          var name = data[i].user.screen_name; 
          function some_function(name, id) { 
               window.location = 'https://twitter.com/'+ name + '/status/' + id ; 
                }; 

         marker[i].addListener("click", function(){ 
         some_function(name, id); 
         }, false); 


         } 

        } 
       }, 

       error: function() { 
        alert("Ajax error!") 
       } 
      }); 
     }, function() { 
      handleLocationError(true, infoWindow, map.getCenter()); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleLocationError(false, infoWindow, map.getCenter()); 
    } 
} 

function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
     'Error: The Geolocation service failed.' : 
     'Error: Your browser doesn\'t support geolocation.'); 
} 

它在我的情況是什麼:

它獲取用戶位置然後發送Long,Latapi/map_controller.rb然後使用Twitter寶石。它在10公里範圍內搜索附近的公共推文。沒有查詢字符串。控制器以JSON格式響應基於JavaScript的谷歌地圖。那麼它會附加推文來映射。

相關問題