Ruby on Rails JavaScript中的Google Maps錯誤

Question

我正在嘗試創建一個與Google Maps集成的Ruby on Rails應用程序。

我的來源：

<!DOCTYPE html>

<html>
    <head>
        <title>Website</title>
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
        <%= csrf_meta_tags %>

        <script src="https://maps.googleapis.com/maps/api/js"></script>

        <script type="text/javascript">

            function initialize() {

                var myLatlng = new google.maps.LatLng(56.794682, 25.224593);

                var mapOptions = {
                    zoom: 15,
                    center: myLatlng
                }

                var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'This is a location'
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>

        <script type="text/javascript">

            ready = function() { 

                //Current page ID
                var page_id = $('div.content').attr('id');

                //Navigation list of all pages
                var navigation_list = $("nav#navigation a");

                //Navigation list check
                navigation_list.each(function(a){

                    if ($(this).attr('id') == page_id) {

                        $(this).css("border-bottom", "3px solid #74c5bd");
                    }
                });
            }

            $(document).ready(ready)
            $(document).on('page:load', ready)

        </script>
    </head>

    <body>

        <%= render "layouts/header" %>
        <%=yield %>
        <%= render "layouts/footer" %>

    </body>
</html>

每次加載屏幕時，都會出現JavaScript錯誤：

TypeError: null is not an object (evaluating 'a.offsetWidth')

此外，不會顯示地圖。 當我重新加載頁面時，地圖終於出現，並且JavaScript錯誤消失了。

問題出在哪里，我該如何解決？

Answer 1

我認為在您的情況下發生的是Turbolinks正在重新加載<body> ，而不是<head> 。 您的自定義腳本正在運行，但是google對象為null。 這就是為什么在重新加載磁頭后刷新整頁后錯誤會清除的原因。

沒有Turbolinks快速修復

使指向您地圖的鏈接退出turbolinks。 單擊鏈接時，這將強制刷新整個頁面。

<div id="some-div" data-no-turbolink>
  # Link to your Map Page
</div>

使用Turbolinks修復

Turbolinks非常酷。 您仍然可以在Google地圖上使用它，只需查看是否已定義google 。 如果未定義，此方法將異步加載google map，否則它將只運行您的ready()方法。

var loadMap = function() {
  if (typeof google === 'undefined' ) {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'libraries=places&'+'callback=ready';
      document.body.appendChild(script);
  } else {
    ready();
  }
};

然后將函數調用更新為：

$(document).ready(loadMap)
$(document).on('page:load', loadMap)

Ruby on Rails JavaScript中的Google Maps錯誤

問題描述

1 個解決方案

解決方案1
0 2015-09-28 20:39:03

Ruby on Rails JavaScript中的Google Maps錯誤

問題描述

1 個解決方案

解決方案1 0 2015-09-28 20:39:03

解決方案1
0 2015-09-28 20:39:03