meteor typeahead addresspicker google未定义错误

时间:2015-10-22 04:02:44

标签: meteor typeahead.js

我正在尝试实现包votercircle:meteor-typeahead-addresspicker。我已将它添加到库中,但是当我去创建一个新的AddressPicker时。

我下面的代码来自示例但似乎不起作用。任何帮助表示赞赏。

enter image description here

if (Meteor.isClient) {

var addressPicker = new AddressPicker();


Template.driversTemplate.rendered = function() {
    $('#address').typeahead(null, {
          displayKey: 'description',
          source: addressPicker.ttAdapter()
    });


};
}

在我的路由文件中,我有以下设置来加载依赖项。

    Router.route('/drivers',{
path:'/drivers',
template:'driversTemplate',
    onBeforeAction: function(){
        var A = IRLibLoader.load('http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js');
        var B = IRLibLoader.load('http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places');

        if(A.ready() && B.ready()){
            console.log("Loading Googles JS Scripts");
            this.next();
        }
    }
});

1 个答案:

答案 0 :(得分:0)

以下是我使用地址选择器的版本1.0.0 实现它的方法。请参阅下面有关包版本的说明。

设定:

meteor create 33273220
cd 33273220
meteor add votercircle:meteor-typeahead-addresspicker@=1.0.0
meteor add iron:router

33273220.html:

<head>
  <title>33273220</title>
  <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
</head>

<body>
</body>

<template name="main">
  {{> yield}}
</template>

<template name="hello">
  Address: <input id="myAddressField" name="myAddressField" type="text" size="50">
</template>

33273220.js:

if (Meteor.isClient) {

  Template.hello.onRendered(function(){
    addressPicker = new AddressPicker();
    $('input[name="myAddressField"]').typeahead(null, {
      displayKey: 'description',
      source: addressPicker.ttAdapter()
    });
  });

}

Router.configure({
  layoutTemplate: "main"
});

Router.route('/', function(){
  this.render('hello');
});

然后添加一些css以使typeahead看起来像样。您可以使用演示中提供的css作为meteor-typeahead包:https://github.com/sergeyt/meteor-typeahead/blob/master/demo/style.css

或者至少:

.tt-dropdown-menu{
  background-color: #eeeeee;
}

.tt-suggestion:hover {
  color: #fff;
  background-color: #0097cf;
}

注意: 使用版本1.0.0的votercircle:meteor-typeahead-addresspicker将拉入版本0.10.5_14的sergeyt:typeahead。这种组合与我提供的代码一起使用。使用最新版本的votercircle:meteor-typeahead-addresspicker(1.0.1,截至本回答时)将提供版本0.11.1_6的sergeyt:typeahead。当我更新软件包版本时,这种组合对我不起作用。