带有 Javascript 的 Google Map API 地理位置

Question

我正在开展一个项目，该项目定位用户位置附近的咖啡店（通过浏览器检索）。我正在使用带有地理位置的 Google Maps API。

我的想法是通过地理定位来定位用户的位置，然后检索他们所在位置附近的咖啡馆。 一旦浏览器检索到位置，我似乎无法弄清楚如何添加咖啡店或自动搜索并在用户附近的地图上显示咖啡店。

硬编码其中的位置似乎不是解决方案，但我希望从更有经验的程序员那里获得一些关于如何做到这一点的建议。

目前，地图的代码取自 Google 地图文档，因为它提供了我需要的搜索以外的功能。

我已经贴在下面了。

     function mapFunc() {
         // referenced from google maps api documentation
         var map;
         var infoWindow;

         function initMap() {
             map = new google.maps.Map(document.getElementById('map'), {
                 center: {
                     lat: -34.397,
                     lng: 150.644
                 },
                 zoom: 15
             });
             infoWindow = new google.maps.InfoWindow;

             //HTML5 geolocation.
             if (navigator.geolocation) {
                 navigator.geolocation.getCurrentPosition(function (position) {
                     var pos = {
                         lat: position.coords.latitude,
                         lng: position.coords.longitude
                     };

                     infoWindow.setPosition(pos);
                     infoWindow.setContent('You are here!');
                     infoWindow.open(map);
                     map.setCenter(pos);
                 }, function () {
                     handleLocationError(true, infoWindow, map.getCenter());
                     search();
                 });
             } else {
                 // Browser doesn't support Geolocation
                 handleLocationError(false, infoWindow, map.getCenter());
             }
         }

         function handleLocationError(browserHasGeolocation, infoWindow, pos) {
             infoWindow.setPosition(pos);
             infoWindow.setContent(browserHasGeolocation ?
                 'Error: The Geolocation service failed.' :
                 'Error: Your browser doesn\'t support geolocation.');
             infoWindow.open(map);
         }

         //get coffee shops nearby??
          }




     mapFunc();

Answer 1

您需要使用 Google Map api 中的地点库。

将其包含在标签中，如下所示

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

然后使用类似下面的示例代码：

var map;
var service;
var infowindow;

function initialize() {
  //replace the lat long with results from your geocoding function
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

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

  var request = {
    location: pyrmont,
    radius: '500', //radius in metres
    type: ['coffee shops']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

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

详情见https://developers.google.com/maps/documentation/javascript/places#place_search_requests