如何在rails 6的application.html.erb中包含一個url？

Question

我正在嘗試在我的 rails 應用程序中添加 Google 地圖。 我按照指導鏈接： https : //medium.com/@pjbelo/using-google-maps-api-v3-with-rails-5-2-b066a4b2cf14 （但我使用rails 6）並且我有我的代碼：應用程序.html.erb：

  <head>
    <title>GmapTry</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    <%= javascript_include_tag 'https://maps.googleapis.com/maps/api/js?key=AIzaSyA7ClwnGU9QTuNhY3DuVqM5K5YbWA7zJsI' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= yield(:head_tags) %>
  </head>

  <body>
    <%= yield %>
  </body>

<% provide :head_tags do %>
  <meta name='turbolinks-visit-control' content='reload'>
  <script>
    document.addEventListener("DOMContentLoaded", function(){
      initMap(<%=@place.latitude%>, <%=@place.longitude%>)
    });
  </script>
<% end %>
...
...
<p>
    <div id="map"></div>
</p>

地方.js

function initMap(lat, lng) {    
    var myCoords = new google.maps.LatLng(lat, lng);    
    var mapOptions = {
        center: myCoords,
        zoom: 14
    };    
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

應用程序.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("gmaps/google")
require("packs/places")

實際上，當我按照第一步顯示靜態地圖時，效果很好，如下所示：

但是當我使用 js 進行下一步時，現在什么也沒有顯示。 有誰知道為什么？ 在 rails 6 中，在 application.html.erb 中寫入%= javascript_include_tag 'https://maps.googleapis.com/maps/api/js?key=AIzaSyA7ClwnGU9QTuNhY3DuVqM5K5YbWA7zJsI' %有什么問題嗎？

Answer 1

我看過的每個地圖教程都會導致內聯腳本標簽和全局變量的死胡同，而實際上“以正確的方式”完成這項工作真的很容易。

只需使用具有數據屬性的元素將信息從視圖傳遞到您的 JavaScript：

<%= content_tag :div, 
                "",
                class: 'google-maps-widget', # call it whatever you want
                data: {
                  lat: @place.latitude,
                  lng: @place.longitude
                }
%>

理想情況下，您可以將此代碼干燥到輔助方法中。 然后只需設置一個事件處理程序，在初始頁面加載時或在 turbolinks 刷新頁面時加載地圖。

document.addEventListener("turbolinks:load", function(){
  // find the maps on the page
  let maps = document.querySelectorAll(".google-maps-widget");
  // loop through the maps
  maps.forEach(function(element){
    let data = element.dataset;
    if (!data.initialized) {
      let map = new google.maps.Map(element, {
        // you can just use a object literal instead 
        center: { lat: data.lat, lng: data.lng },
        // lets you override the inital zoom
        zoom: data.zoom || 14 
      });
      // This keeps the element from being re-initialized 
      // if turbolinks persists it
      element.dataset.initialized = "true";
    }
  });
});

如果你想在地圖上添加一堆標記，你可以在<div class="google-maps-widget"...元素中添加一堆元素：

<div class="google-maps-widget" ... >
  <div class="marker hidden" data-lng="1" data-lng="2">My Favorite spot</div>
  ...
<end>

然后，您將在初始化地圖時解析這些內容。 或者您將數據屬性添加到帶有 URI 的地圖元素，您可以在其中通過 AJAX 獲取標記。

如何在rails 6的application.html.erb中包含一個url？

問題描述

1 個解決方案

解決方案1
1 已采納 2020-03-26 23:00:34

如何在rails 6的application.html.erb中包含一個url？

問題描述

1 個解決方案

解決方案1 1 已采納 2020-03-26 23:00:34

解決方案1
1 已采納 2020-03-26 23:00:34