附近地点 Google Maps Places API答案

【问题标题】：Nearby Places Google Maps Places API附近地点 Google Maps Places API
【发布时间】：2017-06-12 12:03:18
【问题描述】：

首先，我刚开始接触 JavaScript，所以我并不擅长它。我正在使用 Google Maps Places API 制作一个应用程序，您可以在其中按下一个按钮并获取您的位置，按下另一个按钮并根据您的位置获取附近的地点（例如商店或酒吧）。获取设备的位置有效，但我的代码不显示附近的地方。它确实会到达该位置，但不会显示附近地点的标记。我不知道出了什么问题，但我认为这可能与标记的代码或代码的顺序有关。

我正在使用 Intel XDK（HTML5 + Cordova 和 App Designer）和 Google Maps Places API。现在，当按下一个按钮（id="myloc-btn"）时，这一切都会发生，但是（如果位置和附近的地方都有效）我想将它们分成两个按钮，一个显示位置，一个显示位置显示附近的地方。

下面是我的 javascript 代码。我已经注释掉了我最初拥有的设备位置的标记，因为我认为它可能会妨碍附近地点的标记。

有谁知道出了什么问题或者可以帮助我吗？

提前致谢！

---更新---

我尝试从 Google 地图文档 (https://developers.google.com/maps/documentation/javascript/examples/place-search) 中搜索附近的地方，并设置了一个位置（我基本上是复制并粘贴了代码），但这也不起作用。它再次转到正确的位置，但不显示任何标记。我在模拟器和手机上都试过了，但结果都是一样的。我不知道为什么标记不显示

var map;
var service;
var infoWindow;
var pos;
var marker = [];
//var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
//var labelIndex = 0;

function register_event_handlers() {

$(document).on("click", "#myloc-btn", function(evt) {
    initMap();
});

 function initMap() {
    map = new google.maps.Map(document.getElementById('gmap'), {zoom: 14});

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
      pos = {
            lat: position.coords.latitude, 
            lng: position.coords.longitude
      };
      //addMarker(pos, map);
      map.setCenter(pos);
     }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
     } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
     }

     var request = {
        location: pos,
        radius: 5000,
        type: ['store']
      };
      infowindow = new google.maps.InfoWindow();
      var 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]);
            }
        }        
    }
 }
}

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

 /*
 function addMarker(location, map) {
        var marker = new google.maps.Marker({
            map: map,
            // Define the place with a location, a query string and a label.
            place: {
                location: location,
                query: 'This is my location'
            },
            label: labels[labelIndex++ % labels.length],
        });

        // Construct a new InfoWindow.
        var infoWindow = new google.maps.InfoWindow({
            content: 'Here I am!'
        });

        // Opens the InfoWindow when marker is clicked.
        marker.addListener('click', function() {
            infoWindow.open(map, marker);
        }); 
 }
 */ 


 function createMarker(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);
        });
 }

 document.addEventListener("app.Ready", register_event_handlers, false);
 })();

【问题讨论】：

请注意，您的问题本质上与此重复：stackoverflow.com/questions/14220321/…（并且您认为顺序是问题是正确的。）
谢谢！这个问题及其答案确实帮助我更好地理解了代码！

标签： javascript cordova google-maps-api-3 google-places-api intel-xdk

【解决方案1】：

在提供给getCurrentPosition() 的回调中，您正在设置pos。但是，此回调将在手机确定位置之后被调用，即在未来的某个随机点。在您尝试在您的request 中使用pos 之后很长时间了。您需要在自己的函数中移动位置代码，然后在将地图居中后在传递map 和pos 时调用它。几乎与您对 addMarker() 所做的完全一样。

【讨论】：