如何在rails 3.1中使用jquery-addresspicker jquery

Posted 2023-05-07

【中文标题】如何在rails 3.1中使用jquery-addresspicker jquery

【英文标题】：How to use jquery-addresspicker jquery with rails 3.1

【发布时间】：2012-05-10 17:59:12

【问题描述】：

我正在尝试将 jquery-addresspicker 与 rails 3.1 一起使用，但我无法使其运行。

这里是链接https://github.com/sgruhier/jquery-addresspicker，文档中没有提到太多。

谁能建议我应该如何在我的 Rails 应用中使用它？

【问题讨论】：

你里面有演示 html，它没有说明 rails 3.1 但只要你包含脚本，为 text_fields 提供正确的 id 等等，这很容易。+1 用于查找插件。

【参考方案1】：

您是否包含谷歌地图

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

还有 jquery-ui 吗？

【讨论】：

如果我检查元素，我可以看到这两个文件都包含在内

查看JS包含订单。你必须在地址选择器之前包含谷歌地图，否则你会得到一个 JS 错误：谷歌未定义

【参考方案2】：

将脚本代码放在html中，或者单独的js文件中

<script>
        $(function() 
            var addresspicker = $( "#addresspicker" ).addresspicker();
            var addresspickerMap = $( "#addresspicker_map" ).addresspicker(
                regionBias: "fr",
              elements: 
                map:      "#map",
                lat:      "#lat",
                lng:      "#lng",
                locality: '#locality',
                country:  '#country'
              
            );
            var gmarker = addresspickerMap.addresspicker( "marker");
            gmarker.setVisible(true);
            addresspickerMap.addresspicker( "updatePosition");

        );
    </script>


<div>
    <div class='input'>
      <%= f.label :address %><br />
      <%= f.text_field :address, :id => "addresspicker_map" %>
      <%= f.label :locality %><br />
      <%= f.text_field :locality, :id => "locality", :disabled => "true" %>
      <%= f.label :country %><br />
      <%= f.text_field :country, :id => "country", :disabled => "true" %>
      ...
    </div>
    <div id="map"></div>
    <div id="legend">You can drag and drop the marker to the correct location</div>
  </div>

这是我制作的一个教程。我还没有尝试过，但这对你来说是一个开始。 您必须从这里使用 css 对其进行样式设置：

https://github.com/sgruhier/jquery-addresspicker/blob/master/demos/demo.css

从这里将 js 文件包含在应用程序中：

https://github.com/sgruhier/jquery-addresspicker/tree/master/src

和图片：

https://github.com/sgruhier/jquery-addresspicker/tree/master/demos/images

【讨论】：

它不工作，我已经尝试过你的写作方式，但它不会自动完成位置，地图也不会出现

我正在调查它。自动完成功能包含在 jquery.ui.addresspicker.js 中，因此无需为此添加任何其他插件

非常感谢我将应用程序推送到 heroku 上，以防您想查看，我已将位置和国家/地区字段隐藏，因此它们不会显示在页面上.这是链接quiet-ice-5806.heroku.com

好的。我会调查它.. 但首先，您没有包含演示所需的 JS 文件

感谢您的帮助，通过更改 google maps js 的顺序使其正常工作

【参考方案3】：

这已在此 repo https://github.com/ddidier/address_picker-rails 上移植到 rails