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();
        }
    });
});

Submit_property 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>

submit_property 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包，后者又用于Google地图 API加载。

MeteorJs googleMaps自动完成

1 个答案: