谷歌地图api附近的地方搜索

Question

我正在使用Google Maps API地方库在我的Worklight应用程序中使用附近的搜索功能，但只显示地图并且未显示附近的地方。请帮助我。这是我的java脚本代码。< / p>

var map;
var infowindow;

function initialize() {
  var latlon = new google.maps.LatLng(25.984602, 90.785091);
  mapCanvas = document.getElementById('mapholder');
  mapCanvas.style.height = '250px';
  mapCanvas.style.width = '500px';

  map = new google.maps.Map(document.getElementById('mapholder'), { mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: latlon,
    zoom: 15
  });

  var currentMarker = new google.maps.Marker({
	    map: map,
	    position: latlon,
	    title:'Current Location'
	  });
  
  var request = {
    location: latlon,
    radius: 500,
    types: ['atm']
  };
  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]);
    }
  }
  else
	  alert("Status not OK");
}

function createMarker(place) {
	alert("createMarker function");
  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);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

在指定位置500米范围内，没有类型'atm'的地方。如果我将半径增加到5000米，它会返回一个结果。

fiddle

代码段

var map;
var infowindow;

function initialize() {
  var latlon = new google.maps.LatLng(25.984602, 90.785091);
  mapCanvas = document.getElementById('mapholder');
  mapCanvas.style.height = '250px';
  mapCanvas.style.width = '500px';

  map = new google.maps.Map(document.getElementById('mapholder'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: latlon,
    zoom: 15
  });

  var currentMarker = new google.maps.Marker({
    map: map,
    position: latlon,
    title: 'Current Location',
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    }
  });

  var request = {
    location: latlon,
    radius: 5000,
    types: ['atm']
  };
  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) {
    document.getElementById('status').innerHTML = results.length + " places found";
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  } else
    alert("Status not OK");
}

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);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#mapholder {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="status"></div>
<div id="mapholder" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>