MeteorJs googleMaps 自动补全

Question

我有一个使用 MeteorJs 开发的应用程序，我正在尝试使用此包包含 googleMaps 自动完成功能

https://github.com/jshimko/meteor-geocomplete

我想在两个视图中自动完成一个是登录页面，它只有一个简单的输入字段自动完成字段，另一个是一个 submit_property 视图，它有一个自动完成 + 地图输入字段，问题是我已经遵循了所有可用于实现自动完成的说明，但它们似乎与我的代码有问题，因为自动完成没有出现在我的输入中。

着陆页 HTML：

<template name="layoutLanding">
    <header>
        <title>Real Estate</title>
        <link rel="stylesheet" type="text/css" class="" href="/css/bootstrap.css">

    </header>
    <main>
        <div id="Header">
            <div class="wrapper">

            </div>
        </div>
        <div id="bg">
            <img src="/img/48.jpg" class="big"/>
        </div>
        <div id="Content" class="wrapper">
            <div class="countdown styled"><img src="/img/logo.png"/></div><br/>
            <!-- <h2 class="intro">Our website is under construction. Stay tuned for something amazing!. Subscribe to be notified.</h2> -->
            <div id="subscribe">
                <form action="" method="post" onsubmit="">
                    <p>

                        <button type="button" id="select">Acheter</button>
                        <button type="button" id="select1">Louer</button>

                    </p>


                  <!-- Using 2 traingles to achieve border outline :) -->
                    <i id="triangle_down1" style="display: none"><i></i></i>
                  <i id="triangle_down" style="display: none"><i></i></i><br/>

                    <!--Louer triangles -->
                  <i id="triangle_down2" style="display: none"><i></i></i>
                  <i id="triangle_down3" style="display: none"><i></i></i><br/>

                    <div></div>

                    <p><input name="" placeholder="Entrer une ville au Maroc" type="text" id="landing-entry"/>
                        <a href="/results"> <input type="submit" id="main" value="Search"/></a>
                    </p>
                </form>
            </div>

        </div>
        <div id="overlay"></div>

    </main>
</template>

着陆页 JS

Template.layoutLanding.onRendered(function() {
    this.autorun(function(){
        if(GoogleMaps.loaded()){
            $('#landing-entry').geocomplete();
        }
    });
});

提交属性 HTML

<!-- This file is quite big so i have just included where the autocompletion needs to be -->

<div class="clearfix"></div>
   <hr>
     {{> afQuickField name="address" id="geocomplete"  placeholder="Type in an address"}}
    <input id="find" type="button" class="btn btn-primary" value="Find Address" />
    <div class="map_canvas"></div>
  <hr>

提交属性 JS

Template.submit_property.onRendered(function() {
    this.autorun(function(){
        if(GoogleMaps.loaded()){
            $('#geocomplete').geocomplete({
                map: ".map_canvas",
                details: "form",
                types: ["geocode", "establishment"],
            });
        }
    });
});

Template.submit_property.events({
    'click #find': function(){
        $('#geocomplete').trigger('geocode');
    }
});

Answer 1

您似乎忘记使用 GoogleMaps.load 函数加载 Google Maps API：

if (Meteor.isClient) {


    // Load the Google Maps API on startup
    Meteor.startup(() => {
        GoogleMaps.load({
            key: '',
            libraries: 'places'
        });
    });


    Template.layoutLanding.onRendered(function () {
        this.autorun(function () {
            if (GoogleMaps.loaded()) {
                $('#landing-entry').geocomplete();
            }
        });
    });

}

meteor-geocomplete 包使用Google Maps Places API

meteor-geocomplete 包依赖于 meteor-google-maps 包又用于谷歌地图 API 加载。