Question

我正在尝试在我的Meteor应用上实施Google地图，该地图将获取用户的位置，然后会找到在用户附近提供食物的地方。我开始实施example

谷歌提供的，当我这样做的时候它运作良好;但是我试图通过将其添加到实际的Javascript文件来正确实现它，现在它给了我一个“Google未定义”错误。

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

Answer 1

您应该尝试使用dburles：google-maps包。

以下是其作者撰写的示例：http://meteorcapture.com/how-to-create-a-reactive-google-map/

玩得开心！

Answer 2

我必须将您上面的代码放在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);  
  });
});

Meteor实施Google地图和Google商家信息

2 个答案: