MeteorJs谷歌地圖自動完成

Question

我有使用MeteorJs一個應用程序開發，我試圖用這個包

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功能包括谷歌地圖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加載。