使用javascript上的谷歌地點api獲取設備當前位置的附近地點

Question

我正在使用 Google 地圖 API 和 Google Places API 來獲取用戶設備的當前位置並從該位置檢索附近的餐館、健身房等。 我檢查了官方谷歌文檔，並創建了以下代碼：

html代碼：

<div id="map">  </div>
<script src="https://maps.googleapis.com/maps/api/js?key=I_REPLACED_MY_KEY_IN_HERE&libraries=places&callback=initMap" async defer ></script>

爪哇腳本：

var map;
var service;
var infowindow;
var pos;
var request;
var place;

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

  getLocation();
  getNearByPlaces();
  callback();
}

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

      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found.');
      infoWindow.open(map);
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }

infowindow = new google.maps.InfoWindow();
}

function getNearByPlaces(){
   request = {
    location: pos,
    radius: '500',
    query: 'restaurant'
  };

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

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

我正在獲取帶有附近地點和設備當前位置的地圖，問題是我不僅僅獲取了我在請求中指定的餐廳，我只想獲取 500 半徑內的餐廳並檢索它們的緯度和經度、getnearbyplaces 和回調沒有做任何事情。

Answer 1

地理定位服務是異步的。 當位置可用時，您需要在地理定位服務的回調函數中調用getNearByPlaces 。

function getLocation() {
  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      getNearByPlaces(pos); // depends on value of pos
   // existing error handling...

概念證明小提琴

代碼片段：

 var map; var service; var infowindow; var pos; var request; var place; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 6 }); infoWindow = new google.maps.InfoWindow; getLocation(); // getNearByPlaces(); // callback(); } function getLocation() { // Try HTML5 geolocation. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { pos = { lat: position.coords.latitude, lng: position.coords.longitude }; console.log("getLocation:" + pos.lat + "," + pos.lng); var marker = new google.maps.Marker({ position: pos, map: map, icon: "http://maps.google.com/mapfiles/ms/micons/blue.png" }) infoWindow.setPosition(pos); infoWindow.setContent('Location found.'); infoWindow.open(map); map.setCenter(pos); getNearByPlaces(pos); }, function() { console.log("calling handleLocationError(true)"); handleLocationError(true, infoWindow, map.getCenter()); }); } else { // Browser doesn't support Geolocation console.log("calling handleLocationError(false)") handleLocationError(false, infoWindow, map.getCenter()); } infowindow = new google.maps.InfoWindow(); } function getNearByPlaces(pos) { console.log("getNearByPlaces:" + pos.lat + "," + pos.lng); request = { location: pos, radius: '500', query: 'restaurant' }; service = new google.maps.places.PlacesService(map); service.textSearch(request, callback); } function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { console.log("callback received " + results.length + " results"); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < results.length; i++) { console.log(JSON.stringify(results[i])); place = results[i]; var mark = createMarker(results[i]); bounds.extend(mark.getPosition()); } map.fitBounds(bounds); } else console.log("callback.status=" + status); } 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); } function createMarker(place) { var marker = new google.maps.Marker({ map: map, position: place.geometry.location, icon: "http://maps.google.com/mapfiles/ms/micons/red.png" }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(place.name); infowindow.open(map, this); }); return marker; }

 html, body, #map { height: 100%; margin: 0; padding: 0; }

 <div id="map"></div> <!-- Replace the value of the key parameter with your own API key. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>