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

时间:2012-05-01 05:06:19

标签: ruby-on-rails jquery-ui ruby-on-rails-3.1 jquery-address

我正在尝试使用带有rails 3.1的jquery-addresspicker,但我无法让它运行。

以下是链接https://github.com/sgruhier/jquery-addresspicker,文档未提及太多。

有人可以建议我应该如何在我的rails应用程序中使用它?

3 个答案:

答案 0 :(得分:3)

你是否包含谷歌地图

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

和jquery-ui?

答案 1 :(得分:1)

将脚本代码放在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

答案 2 :(得分:0)

这个已在此回购https://github.com/ddidier/address_picker-rails

移植到导轨