首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >rails 5、turbolinks 5和google地图如何?

rails 5、turbolinks 5和google地图如何?
EN

Stack Overflow用户
提问于 2016-08-14 10:23:42
回答 4查看 3.2K关注 0票数 7

我使用rails 5和turbolinks 5,并试图使用google网站found 这里中的示例使google places自动完成地址表单工作。

我只想在这个页面上加载javascript和google地图库。

获得以下javascript使用rails 5和turbolinks 5的正确方法是什么?

代码语言:javascript
运行
复制
<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>
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-08-15 07:35:02

根据文件:

每次页面呈现页面时,Turbolinks都会计算页面正文中的脚本元素。您可以使用内联体脚本来设置每个页面的JavaScript状态或引导客户端模型。若要安装行为,或在页面更改时执行更复杂的操作,请避免使用脚本元素,而应使用turbolinks:load事件。

但是,它不适用于我的原因是,在布局/application.html.erb中,我有:

代码语言:javascript
运行
复制
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>

当它应该是:

代码语言:javascript
运行
复制
<%= javascript_include_tag "application", 'data-turbolinks-track': 'reload' %>
票数 -3
EN

Stack Overflow用户

发布于 2017-03-16 18:51:53

我解决了Turbolinks 5和Google问题,只是在我的google地图脚本标记上使用了数据-turbolinks-eval=“false”属性。

代码语言:javascript
运行
复制
... 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文件中使用:

代码语言:javascript
运行
复制
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)
})
票数 6
EN

Stack Overflow用户

发布于 2016-09-15 03:43:47

也试试这个..。

代码语言:javascript
运行
复制
google.maps.event.addDomListener(window, 'turbolinks:load', initialize);
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38941286

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档