實現谷歌地圖和Google地方的流星

我試圖在我的Meteor應用程序上實現一個Google Map來獲取用戶的位置，然後找到在用戶附近提供食物的地方。我開始執行由Google給出的example 實現谷歌地圖和Google地方的流星

，並且當我這樣做時它工作正常;但是我試圖通過將它添加到實際的Javascript文件來正確實現它，現在它給了我一個「Google is undefined」錯誤。

menuList = new Mongo.Collection('items'); 
 
if (Meteor.isClient) { 
 

 
    var pls; 
 
    var map; 
 
    var infowindow; 
 
    Meteor.startup(function() { 
 
     //get user location and return location in console 
 
     var options = { 
 
      enableHighAccuracy: true, 
 
      timeout: 5000, 
 
      maximumAge: 0 
 
     }; 
 

 
     function success(pos) { 
 
      var crd = pos.coords; 
 

 
      console.log('Your current position is:'); 
 
      console.log('Latitude : ' + crd.latitude); 
 
      console.log('Longitude: ' + crd.longitude); 
 
      console.log('More or less ' + crd.accuracy + ' meters.'); 
 
      pls = {lat: crd.latitude, lng: crd.longitude}; 
 
     }; 
 

 
     function error(err) { 
 
      console.warn('ERROR(' + err.code + '): ' + err.message); 
 
     }; 
 

 
     navigator.geolocation.getCurrentPosition(success, error, options); 
 
    }) 
 

 
    Meteor.methods({ 
 
     callback: function (results, status) { 
 
      if (status === google.maps.places.PlacesServiceStatus.OK) { 
 
       for (var i = 0; i < results.length; i++) { 
 
        createMarker(results[i]); 
 
       } 
 
      } 
 
     }, 
 

 
     createMarker: function (place) { 
 
      var placeLoc = place.geometry.location; 
 
      var marker = new google.maps.Marker({ 
 
       map: map, 
 
       position: place.geometry.location 
 
      }); 
 

 
      google.maps.event.addListener(marker, 'click', function() { 
 
       infowindow.setContent(place.name); 
 
       infowindow.open(map, this); 
 
      }); 
 
     } 
 

 

 
    }) 
 

 
    Template.searchIt.helpers({ 
 
     'initMap': function() { 
 
      console.log("HERE"); 
 
      //Dummy values I placed for StackOverflow 
 
      var pyrmont = {lat: -33.234, lng: 95.343}; 
 

 
      map = new google.maps.Map(document.getElementById('map'), { 
 
       center: pyrmont, 
 
       zoom: 15 
 
      }); 
 

 
      infowindow = new google.maps.InfoWindow(); 
 
      var service = new google.maps.places.PlacesService(map); 
 
      service.nearbySearch({ 
 
       location: pyrmont, 
 
       radius: 500, 
 
       types: ['food'] 
 
      }, callback); 
 
     } 
 

 

 
    }) 
 
}

<head> 
 
    <title>Place searches</title> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <div id="map"></div> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyACgaDFJrh2pMm-bSta1S40wpKDDSpXO2M \t 
 
&signed_in=true&libraries=places" async defer></script> 
 
    <style> 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 100%; 
 
     } 
 
    </style> 
 
    
 
    </head> 
 
    <body> 
 
     {{>searchIt}} 
 
    
 
    </body> 
 

 

 
<template name="searchIt"> 
 
{{initMap}} 
 
</template>

來源

2016-02-06 E.Sen

你應該嘗試dburles：谷歌地圖包。

下面是它的作者寫的一個例子：http://meteorcapture.com/how-to-create-a-reactive-google-map/

玩得開心！

來源

2016-02-06 21:22:45

其實我已經安裝了這個軟件包！我跟着那個教程，它在地理定位上工作得很好，但我無法讓它返回附近的食物場所。 –

我不得不將上面的代碼放在GoogleMaps.ready('map', callback)塊內。或在if (GoogleMaps.loaded()) {}區塊內...

例如..這工作得很好：告誡：我使用雷達搜索，但概念是相同的。

Template.galleryCard.onRendered(function() { 
    GoogleMaps.ready('minimap', function(map) { 
     const params = { 
     map: map, 
     name: 'The Spice Suite', 
     loc: {lat: 38.9738619, lng: -77.01829699999999}, 
     }; 
     const service = new google.maps.places.PlacesService(params.map.instance); 
     let request2 = { 
      //name & location & radius (meters). 
      name: params.name, 
      location: params.loc, 
      radius: 100, 
     }; 

     let callback = function(results,status) { 
      if (status === google.maps.places.PlacesServiceStatus.OK) { 
       console.log(results[0]);  
       return results[0].place_id; 
      } else { 
       console.log(status); 
      } 
     }; 
     service.radarSearch(request2,callback); 
    }); 
});

來源

2017-04-09 16:22:04

實現谷歌地圖和Google地方的流星

回答

相關問題