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和谷歌地图如何？

回答

相关问题