rails 5 turbolinks 5和谷歌地圖如何？

我使用的是turbolinks 5導軌5和試圖讓谷歌的地方自動完成地址形式使用從谷歌網站上的例子來工作中發現here rails 5 turbolinks 5和谷歌地圖如何？

我只希望加載這個頁面上的JavaScript和谷歌地圖圖書館。

什麼是正確的方式來獲得下面的JavaScript與軌道5的工作和turbolinks 5

<script> 
    // This example displays an address form, using the autocomplete feature 
    // of the Google Places API to help users fill in the information. 

    // This example requires the Places library. Include the libraries=places 
    // parameter when you first load the API. For example: 
    // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 

    var placeSearch, autocomplete; 
    var componentForm = { 
    street_number: 'short_name', 
    route: 'long_name', 
    locality: 'long_name', 
    administrative_area_level_1: 'short_name', 
    country: 'long_name', 
    postal_code: 'short_name' 
    }; 

    function initAutocomplete() { 
    // Create the autocomplete object, restricting the search to geographical 
    // location types. 
    autocomplete = new google.maps.places.Autocomplete(
     /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), 
     {types: ['geocode']}); 

    // When the user selects an address from the dropdown, populate the address 
    // fields in the form. 
    autocomplete.addListener('place_changed', fillInAddress); 
    } 

    function fillInAddress() { 
    // Get the place details from the autocomplete object. 
    var place = autocomplete.getPlace(); 

    for (var component in componentForm) { 
     document.getElementById(component).value = ''; 
     document.getElementById(component).disabled = false; 
    } 

    // Get each component of the address from the place details 
    // and fill the corresponding field on the form. 
    for (var i = 0; i < place.address_components.length; i++) { 
     var addressType = place.address_components[i].types[0]; 
     if (componentForm[addressType]) { 
     var val = place.address_components[i][componentForm[addressType]]; 
     document.getElementById(addressType).value = val; 
     } 
    } 
    } 

    // Bias the autocomplete object to the user's geographical location, 
    // as supplied by the browser's 'navigator.geolocation' object. 
    function geolocate() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     var geolocation = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
     }; 
     var circle = new google.maps.Circle({ 
      center: geolocation, 
      radius: position.coords.accuracy 
     }); 
     autocomplete.setBounds(circle.getBounds()); 
     }); 
    } 
    } 
</script> 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" 
    async defer></script>

來源

2016-08-14 adds

按照文檔：

Turbolinks評估在頁面的身體腳本元素每次渲染頁面。您可以使用內聯正文腳本來設置每頁JavaScript狀態或引導客戶端模型。要安裝行爲或在頁面更改時執行更復雜的操作，請避免腳本元素並使用turbolink：load事件。

，但它不是爲我工作的原因是因爲在佈局/ application.html.erb我：

<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>

當它應該是：

<%= javascript_include_tag "application", 'data-turbolinks-track': 'reload' %>

來源

2016-08-15 07:35:02 adds

試試這個太...

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

來源

2016-09-15 03:43:47

我解決了Turbolinks 5和Google Maps API問題只是w ith data-turbolinks-eval =「false」屬性在我的Google地圖腳本標記中。

... application.html.erb 
<head> 
<!-- Other HTML page Head content -->  
<title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title> 
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY" data-turbolinks-eval="false"></script> 
<%= javascript_include_tag "application", 'data-turbolinks-track' => 'reload' %> 
</head>

，並在你的咖啡/ js文件使用：

coffee: 
$(document).on "turbolinks:load", -> 
    map = new google.maps.Map $('map').get(0), mapOptions 
js: 
$(document).on("turbolinks:load", function(){ 
    map = new google.maps.Map($('map').get(0), mapOptions) 
})

來源

2017-03-16 18:51:53

rails 5 turbolinks 5和谷歌地圖如何？

回答

相關問題