Javascript 加拿大邮政地址需要完整的API使用帮助_Javascript_Api

Javascript 加拿大邮政地址需要完整的API使用帮助

javascript api

Javascript 加拿大邮政地址需要完整的API使用帮助,javascript,api,Javascript,Api,所以我一直很难完成加拿大邮政地址的演示这是演示显示的内容：这是API设置：我已将以下内容放入一个html文件中。请注意，我基本上只是从API设置URL复制了前2个代码片段 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title&

所以我一直很难完成加拿大邮政地址的演示

这是演示显示的内容：

这是API设置：

我已将以下内容放入一个html文件中。请注意，我基本上只是从API设置URL复制了前2个代码片段

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="input-line">  
        <label for="street-address">Address</label>  
        <input id="street-address" type="text" placeholder="Street address" autofocus /> 
    </div> 
    <div class="input-line">  
        <label for="street-address2"></label>  
        <input id="street-address2" type="text" placeholder="" /> 
    </div> 
    <div class="input-line">  
        <label for="city"></label>  
        <input id="city" type="text" placeholder="City" /> 
    </div> 
    <div class="input-line">  
        <label for="state"></label>  
        <input id="state" type="text" placeholder="State/Province" /> 
    </div> 
    <div class="input-line">  
        <label for="postcode"></label>  
        <input id="postcode" type="text" placeholder="Zip/Postcode" /> 
    </div> 
    <div class="input-line">  
        <label for="country"></label>  
        <input id="country" type="text" placeholder="Country" /> 
    </div>  
     
    <div class="input-line">  
        <label for="multi-unit"></label>  
        <input id="multi-unit" type="text" placeholder="Multi-Unit-Indicator" /> 
    </div> 
    <div class="input-line">  
        <label for="residential-business"></label>  
        <input id="residential-business" type="text" placeholder="Residential/Business" /> 
    </div> 
  </body>
  
  <script type="text/javascript">  
    var fields = [   
        { element: "search", field: "", mode: pca.fieldMode.SEARCH }, 
 
        { element: "street-address", field: "Line1", mode: pca.fieldMode.POPULATE },   
        { element: "street-address2", field: "Line2", mode: pca.fieldMode.POPULATE },   
        { element: "city", field: "City", mode: pca.fieldMode.POPULATE },   
        { element: "state", field: "ProvinceName", mode: pca.fieldMode.POPULATE },   
        { element: "postcode", field: "PostalCode" },   
        { element: "country", field: "CountryName", mode: pca.fieldMode.COUNTRY }, 
 
        { element: "multi-unit", field: "{AcMua}", mode: pca.fieldMode.POPULATE },   
        { element: "residential-business", field: "{AcRbdi}", mode: pca.fieldMode.POPULATE }  
    ],  
    options = {   
        key: "AA11-AA11-AA11-AA11"  
    },  
    control = new pca.Address(fields, options); 
</script>


地址
变量字段=[
{元素：“搜索”，字段：，模式：pca.fieldMode.search}，
{元素：“街道地址”，字段：“Line1”，模式：pca.fieldMode.POPULATE}，
{元素：“street-address2”，字段：“Line2”，模式：pca.fieldMode.POPULATE}，
{元素：“城市”，字段：“城市”，模式：pca.fieldMode.POPULATE}，
{元素：“状态”，字段：“ProvinceName”，模式：pca.fieldMode.POPULATE}，
{元素：“邮政编码”，字段：“邮政编码”}，
{元素：“国家”，字段：“国家名称”，模式：pca.fieldMode.country}，
{元素：“多单元”，字段：{AcMua}，模式：pca.fieldMode.POPULATE}，
{元素：“住宅业务”，字段：{AcRbdi}，模式：pca.fieldMode.POPULATE}
],  
选项={
键：“AA11-AA11-AA11-AA11”
},  
控制=新的pca地址（字段、选项）；

从控制台，它抱怨

Uncaught ReferenceError:pca未定义

，这是有道理的，因为

pca

在任何地方都未定义。我的问题是，这个

pca

对象来自哪里？我不知怎么导入了它吗

我已经研究过这条线了。作者可以搜索地址并自动填充一些地址字段。但是我没有看到作者从任何地方导入

pca

谢谢你的帮助。

可能看起来很明显；但是，您是否遵循了本页上的步骤

使用API时，您还需要设置步骤2所示的API键。

解决了这个问题

需要以下

脚本

另外，对于完整的地址完整的实现，不要忘记为搜索输入添加一个

div

下面是演示的完整实现，不要忘记将api密钥更改为您自己的：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    
    <link rel="stylesheet" type="text/css" href="https://ws1.postescanada-canadapost.ca/css/addresscomplete-2.30.min.css?key=tr28-mh11-ud79-br91" />
    <script type="text/javascript" src="https://ws1.postescanada-canadapost.ca/js/addresscomplete-2.30.js?key=tr28-mh11-ud79-br91&app=14466&culture=en"></script>
  </head>
  <body>
    <div class="input-line">
      <input id="search" type="text" name="" value="">
    </div>
    <div class="input-line">  
        <label for="street-address">Address</label>  
        <input id="street-address" type="text" placeholder="Street address" autofocus /> 
    </div> 
    <div class="input-line">  
        <label for="street-address2"></label>  
        <input id="street-address2" type="text" placeholder="" /> 
    </div> 
    <div class="input-line">  
        <label for="city"></label>  
        <input id="city" type="text" placeholder="City" /> 
    </div> 
    <div class="input-line">  
        <label for="state"></label>  
        <input id="state" type="text" placeholder="State/Province" /> 
    </div> 
    <div class="input-line">  
        <label for="postcode"></label>  
        <input id="postcode" type="text" placeholder="Zip/Postcode" /> 
    </div> 
    <div class="input-line">  
        <label for="country"></label>  
        <input id="country" type="text" placeholder="Country" /> 
    </div>  
     
    <div class="input-line">  
        <label for="multi-unit"></label>  
        <input id="multi-unit" type="text" placeholder="Multi-Unit-Indicator" /> 
    </div> 
    <div class="input-line">  
        <label for="residential-business"></label>  
        <input id="residential-business" type="text" placeholder="Residential/Business" /> 
    </div> 
  </body>
  
  <script type="text/javascript">  
    var fields = [   
        { element: "search", field: "", mode: pca.fieldMode.SEARCH }, 
 
        { element: "street-address", field: "Line1", mode: pca.fieldMode.POPULATE },   
        { element: "street-address2", field: "Line2", mode: pca.fieldMode.POPULATE },   
        { element: "city", field: "City", mode: pca.fieldMode.POPULATE },   
        { element: "state", field: "ProvinceName", mode: pca.fieldMode.POPULATE },   
        { element: "postcode", field: "PostalCode" },   
        { element: "country", field: "CountryName", mode: pca.fieldMode.COUNTRY }, 
 
        { element: "multi-unit", field: "{AcMua}", mode: pca.fieldMode.POPULATE },   
        { element: "residential-business", field: "{AcRbdi}", mode: pca.fieldMode.POPULATE }  
    ],  
    options = {   
        key: "ADD-YOUR-KEY-HERE"  
    },  
    control = new pca.Address(fields, options); 
</script>
  
  
</html>


地址
变量字段=[
{元素：“搜索”，字段：，模式：pca.fieldMode.search}，
{元素：“街道地址”，字段：“Line1”，模式：pca.fieldMode.POPULATE}，
{元素：“street-address2”，字段：“Line2”，模式：pca.fieldMode.POPULATE}，
{元素：“城市”，字段：“城市”，模式：pca.fieldMode.POPULATE}，
{元素：“状态”，字段：“ProvinceName”，模式：pca.fieldMode.POPULATE}，
{元素：“邮政编码”，字段：“邮政编码”}，
{元素：“国家”，字段：“国家名称”，模式：pca.fieldMode.country}，
{元素：“多单元”，字段：{AcMua}，模式：pca.fieldMode.POPULATE}，
{元素：“住宅业务”，字段：{AcRbdi}，模式：pca.fieldMode.POPULATE}
],  
选项={
键：“在此处添加您的键”
},  
控制=新的pca地址（字段、选项）；

我正在使用从安装程序中获得的API密钥。我只是在stackoverflow上粘贴了示例键，而不是我自己的。