Question

我正在使用Google Maps API创建地图，以根据餐馆的位置参考餐馆。我的数据库中的每个餐馆（sqlite3）都有一个标题，一个描述和两个坐标（纬度，经度）。我可以在我的数据库中成功创建条目，但很难找到一个解决方案来从JS调用每个餐馆的数据库坐标。

已经在Stackoverflow上提出了不同的解决方案，其中this one，another和last one，但我的问题没有答案，因为我只使用JS和Ruby（在轨）。

你有建议吗？

Answer 1

首先，您需要阅读Goolge Maps Javascript API中的this example并使用此代码：

<!DOCTYPE html>
<html>
<head>
<style>
   #map {
    height: 400px;
    width: 100%;
   }
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
  function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap">
</script>
</body>
</html>

正如您在此处所见，您需要

创建您自己的GOOGLE_MAPS_API_KEY here
使用id;

div

连接谷歌的javascript，加载时，还会加载js-function initMap()
定义initMap - 使用地图和标记设置的功能。

下一步：从数据库获取数据并传递给JavaScript 。

我使用gon gem将数据从后端传输到前端：

控制器中的

：

# app/controllers/application_controller.rb
def root
  gon.locations = Location.all
end

布局：

<!-- app/views/layouts/application.html.erb -->
<head>
<%= include_gon %>
<!-- ... -->
</head>

在视图中：

<!-- app/views/application/root.html.erb -->
<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: { lat: gon.locations[0].lat, lng: gon.locations[0].lng }
    });

    for(var i = 0; i < gon.locations.length; i++){
      new google.maps.Marker({
        position: { lat: gon.locations[i].lat, lng: gon.locations[i].lng },
        title: gon.locations[i].name,
        map: map
      });
    }
  }
<script>

但是，如果您不希望使用gon gem将数据从后端传递到前端，则可以通过简单的rails来执行此操作：

# app/controllers/application_controller.rb
def root
  @json_data = {
    locations: {
      # ...
    },
    # ...
  }.to_json
end

<!-- views/posts/edit.html.erb -->
<script>
  var json_data = JSON.parse('<%= raw(escape_javascript(@json_data)) %>');
</script>

此外，我创建了rails demo application，您可以使用它。

This commit做好所有工作，写下“ICE＆＃39;在南极洲的标记词。
有关详细信息，请参阅这些文件：
- app/controllers/application_controller.rb
- app/views/application/root.html.erb
- app/views/layouts/application.html.erb
我使用this online service为“ICE＆＃39;”创建了坐标。字

Answer 2

您可以尝试的一种方法是使用json。例如在控制器中。

class RestaurantsController < ApplicationController
  def show
    @restaurant = Restaurant.find(params[:id])

    respond_to do |format|
      format.html
      format.json {render json: @restaurant}
    end

  end
end

然后可以通过javascript访问餐厅（我将使用JQuery）

 $.getJSON("show_page_url.json", function(data){
   //data will contain the @restaurant object 
   //so data.latitute should return the value
}

也许这有帮助。我用它做了一个我最近做过的简单项目，但也许有更好的方法。

Answer 3

要使你的rails app中的变量可以访问js代码，你需要将这些值保存在渲染的html中，之后你的js代码可以从html中获取值。您可以使用gon，这样您就不必自己编写解决方案。以下是使其正常运行的步骤：

安装宝石＆＃39; gon＆＃39;。
将<%= Gon::Base.render_data %>添加到您的布局中。
设置变量：gon.push(restaurants: restaurants)。
在你的js代码中，读取数据并将其传递给你的地图。

从rails数据库添加标记

3 个答案: