Как включить URL в приложении. html .erb в рельсах 6? - PullRequest
Новая
       0

Как включить URL в приложении. html .erb в рельсах 6?

0 голосов
/ 27 марта 2020

Я пытаюсь добавить Google Map в мое приложение rails. Я перешел по ссылке руководства: https://medium.com/@pjbelo / using- google-maps -api-v3-with-rails-5-2-b066a4b2cf14 (но я использую rails 6), и у меня есть код code: application. 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")

На самом деле, когда я следовал первый шаг, чтобы показать карту stati c, она работает хорошо, как: Static Map

, но когда я go перехожу к следующему шагу с js, сейчас ничего не появляется , Кто-нибудь знает почему? В rails 6 есть что-то неправильное в написании %= javascript_include_tag 'https://maps.googleapis.com/maps/api/js?key=AIzaSyA7ClwnGU9QTuNhY3DuVqM5K5YbWA7zJsI' % в приложении. html .erb?

1 Ответ

1 голос
/ 27 марта 2020

Каждое учебное пособие по картам, которое я видел, ведет к тупику встроенных тегов сценариев и глобальных переменных, когда на самом деле довольно легко выполнить работу "правильным способом".

Просто используйте элемент с атрибутами данных для передачи информации из представления в JavaScript: 

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

В идеале вы можете DRY этот код в качестве вспомогательного метода. Затем просто установите обработчик событий, который загружает карту при начальной загрузке страницы или когда турболинки обновляют страницу . 

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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...