附近的地方Google Maps Places API

时间:2017-01-26 21:25:11

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

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

我使用的是英特尔XDK(HTML5 + Cordova和App Designer)以及Google Maps Places API。现在这一切都发生在按下一个按钮(id =" myloc-btn"),但是(如果位置和附近的地方都工作)我想在两个按钮中分开它们,一个显示位置和一个显示附近的地方。

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

任何人都知道错误或可以帮助我吗?

提前致谢!

--- --- UPDATE

我尝试在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);
 })();

1 个答案:

答案 0 :(得分:1)

在提供给getCurrentPosition()的回调中,您正在设置pos。但是,在手机确定了位置后,即在将来的某个随机点,此回调将被称为之后

您需要在其自己的函数中移动场所代码,然后在您将地图居中后传递posrequest时调用它。几乎就是你对map所做的一切。