为Google Maps配置jQuery插件

时间:2013-08-17 13:34:01

标签: jquery google-maps

我正在使用这个插件: http://smartystreets.com/kb/liveaddress-api/plugin/configure

守则:

   <!DOCTYPE html>
   <html>
  <head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

   <script src="//d79i1fxsrar4t.cloudfront.net/jquery.liveaddress/2.4/jquery.liveaddress.min.js">   </script>

 <script>jQuery.LiveAddress("my key");</script>

   <script type="text/javascript">
   var liveaddress = $.LiveAddress({
    key: 'my key',
   debug: true,
    addresses: [{
    id: 'mySubmitButton',      // IDs are not part of the address
    street: '#street_add',
    street2: '#street2',    // Not all these fields are required
    city: '#city',
    state: '#state',
    zipcode: '#postcode',
    country: '#country'
   },
   {

   }]
    });

     </script>  


   </head>
   <body>
    <div id="panel">
       <form action="" name="" method="post">
           <input id="addresses" type="hidden" value="">
           Street Address<input id="street_add" type="textbox" value="" class="address">  <br />
           City<input id="city" type="textbox" value="" class="address"><br />
           State<input id="state" type="textbox" value="" class="address"><br />
           Zipcode<input id="postcode" type="textbox" value="" class="address"><br />
           Country<input id="country" type="textbox" value="" class="address"><br />
           <input type="submit" value="submit" id="#mySubmitButton" />
     </form>
    </div>
    <div id="map-canvas" style="height:40%;top:30px;"></div>
   </body>
   </html>

根据说明,似乎我需要配置它以使其工作。我看到正在调用LiveAddress函数,然后我添加了配置部分(var live address) 这是否正确初始化和配置,看起来它是否会连接到表单?

1 个答案:

答案 0 :(得分:0)

以下是基于文档执行此操作的一种方法。首先初始化liveaddress对象并在同一实例中执行映射。目前你已经分开完成了。这是不必要的。

var l = $.LiveAddress({
    key: 'HTML_KEY',
    debug: true,
    addresses: [{
        id: 'billing',      // IDs are not part of the address
        street: '#street1',
        street2: '#street2',    // Not all these fields are required
        city: '#city',
        state: '#state',
        zipcode: '#zip',
        country: '#country'
    },
    {
        id: 'shipping',     // IDs are optional, but can be helpful
        street: '#addrTb'
    }]
});

然后你所要做的就是调用verify方法

l.verify('billing');