首页 文章

使用Google Maps Javascript API的Rails应用程序仅适用于多页重新加载

提问于
浏览 次
0

我正在尝试将Google Maps Javascript API添加到Rails 5.2 Web应用程序中 . 我有一个启用了Google Maps Javascript API的Google Developer帐户和API密钥 . Google文档中的示例代码位于https://developers.google.com/maps/documentation/javascript/tutorial . 我用我的API_KEY把它放在一个普通的html文件中，它运行正常 . 但我不能让它在Rails中正常工作 . 三个重要的代码部分是：

1）在我的html页面上添加一个id = map的div . 这是 Map 的显示位置 .

# app/views/pages/map_page.html.erb
<div id="map"></div>

2）使用我的API密钥调用Google API，然后回调函数initMap . 我把它放在application.html.erb文件的head部分 .

# app/views/layouts/application.html.erb
<script src="https://maps.googleapis.com/maps/api/jskey=MY_API_KEY&callback=initMap" 
async defer></script>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

3）使用 Map 的硬编码坐标定义initMap函数 . 我把它放在它自己的js文件中 .

# app/assets/javascripts/map.js
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

此设置仅在我刷新页面一次或多次时才有效 . 我确信这与turbolinks有关，但如果我尝试将turbolinks函数包装起来，那就更糟了 . 然后我得到一个错误，说无论刷新页面多少次，initMap都不是一个函数 .

document.addEventListener("turbolinks:load", function() {
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
});

根据另一个SO答案，我将application.html.erb中的Google API调用更改为以下添加数据-surbolinks-eval =“false . 没有运气 .

<script async 
src="https://maps.googleapis.com/maps/api/jskey=MY_API_KEY&callback=initMap"
defer data-turbolinks-eval="false"></script>

如何在不刷新页面的情况下使其正常工作？

javascript ruby-on-rails google-maps

1 回答

  • 0

    我找到了解决方案，我会在这里发布，以防有人遇到同样的问题 .

    事实证明，有两个问题 . 一个是谷歌示例中的CSS，内联是：

    <div id="map" style="height: 100%;"></div>

    这在单个html文档中运行良好，但它在我的Rails应用程序中不起作用（不确定原因，但显然这是一个已知问题） . 我必须添加一个明确的高度 . 第二个问题是我在问题中提出的问题 . 在第一页加载 Map 上加载而无需刷新页面 . 为此，您需要将Google API调用和回调放置在页面底部的initMap函数中，而不是放在application.html.erb head部分中 .

    # app/views/pages/map_page.html.erb
<div id="map" style="height: 400px;"></div>
<script src="https://maps.googleapis.com/maps/api/jskey=MY_API_KEY&callback=initMap" 
async defer></script>

    您可以将initMap函数放在自己的js文件中，或者甚至将它放在google api调用上方的脚本标记内的相同map_page文件中 . 不要用turbolinks包裹它：加载 .

    回复于

相关问题