Question

我很快就需要解决这个问题。我一直在尝试将geocomplete添加到我的Meteor js应用程序中，但不断出现错误。我已经通过NPM将geocomplete安装到Meteor应用程序中。我如何从那里使用它？或者是否有任何其他Meteor软件包已实现此功能，因为我没有。我尝试过遵循此实现http://ubilabs.github.io/geocomplete/examples/form.html但无法使其正常工作。

这是UI代码

<template name="geos">
    <div class="form-group">
        <input id="geocomplete" type="text" class="form-control" placeholder="Type in an address" value="Lekki Phase" style="width: 100%;" />
    </div>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCWz0jrRG2GoQ&libraries=places"></script>
<script src="/js/jquery.geocomplete.js"></script>
</template>

NPM安装

C:\Programs\contract\schoolapps>npm install geocomplete
npm WARN deprecated uglifyjs@2.4.11: uglifyjs is deprecated - use uglify-js instead.
npm WARN prefer global marked@0.3.6 should be installed with -g
schoolapps@ C:\Programs\contract\schoolapps
`-- geocomplete@1.7.0
  +-- docco@0.6.3
  | +-- commander@2.9.0
  | | `-- graceful-readlink@1.0.1
  | +-- fs-extra@3.0.1
  | | +-- graceful-fs@4.1.11
  | | +-- jsonfile@3.0.0
  | | | `-- graceful-fs@4.1.11  deduped
  | | `-- universalify@0.1.0
  | +-- highlight.js@9.11.0
  | +-- marked@0.3.6
  | `-- underscore@1.8.3
  `-- uglifyjs@2.4.11

这是onrendered函数

Template.SchoolContactLayout.rendered = function () {
    $(function(){
          $("#geocomplete").geocomplete({
          map: ".map_canvas",
          details: "form",
          types: ["geocode", "establishment"],
        });
     });
}

我在控制台上出现此错误

Exception from Tracker afterFlush function:
meteor.js?hash=27829e9…:930 TypeError: $(...).geocomplete is not a function
    at HTMLDocument.<anonymous> (schoolcontact.js:25)
    at fire (jquery.js?hash=c57b3cf…:3201)
    at Object.self.add [as done] (jquery.js?hash=c57b3cf…:3247)
    at jQuery.fn.ready (jquery.js?hash=c57b3cf…:3481)
    at jQuery.fn.init (jquery.js?hash=c57b3cf…:2921)
    at jQuery (jquery.js?hash=c57b3cf…:131)
    at Template.SchoolContactLayout.rendered (schoolcontact.js:2)
    at blaze.js?hash=f33d3df…:3398
    at Function.Template._withTemplateInstanceFunc (blaze.js?hash=f33d3df…:3744)
    at fireCallbacks (blaze.js?hash=f33d3df…:3394)

我该怎么做才能让这个工作？

Answer 1

您收到错误是因为它无法找到dom并将其视为流星函数。您应该在渲染dom后调用该方法，并在之前使用'this'关键字指向dom存在的模板实例，以便jquery考虑它。

Template.SchoolContactLayout.onRendered(function(){
  // we're using the template instance scoped jQuery

this.$("#geocomplete").geocomplete({

      map: ".map_canvas",
      details: "form",
      types: ["geocode", "establishment"]
  });
});

确认它是否适合您。

Answer 2

试试这个并告诉我它是否有效

Template.SchoolContactLayout.onCeated(function () {
          $("#geocomplete").geocomplete({
          map: ".map_canvas",
          details: "form",
          types: ["geocode", "establishment"],
        });
     });

在Meteor App中使用地理填充

2 个答案: