Radius 忽略谷歌地图 API

Question

I would like to see points of interest within recover from a slider but I feel that the property radius is not taken into account. When I try to change the value , I see the change, but it is not a good result. Radius is in meters ? Can you help me? thank you in advance

 var radius = 50; $(document).ready(function(){ $('#range-input').on('change', function(evt, range) { radius = $(this).val(); $('#range-output').val($(this).val() + "m"); }); }); var infowindow; var latU; var lngU; var distance; var motCle; function initMap() { var mapOptions = { zoom:12, scaleControl: true, streetViewControl: true, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL, position: google.maps.ControlPosition.RIGHT_CENTER }, mapTypeId: google.maps.MapTypeId.ROADMAP } geocoder = new google.maps.Geocoder(); infowindow = new google.maps.InfoWindow(); if (navigator.geolocation) navigator.geolocation.getCurrentPosition(successCallback, null, {enableHighAccuracy:true}); else alert("Votre navigateur ne prend pas en compte la géolocalisation, activez la localisation et réessayer"); function successCallback(position){ var distance = radius+'m'; var motCle = $('#motCle').val; latU = position.coords.latitude ; lngU = position.coords.longitude; map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); var myLatLng = new google.maps.LatLng(latU, lngU); var marker = new google.maps.Marker({ position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), map: map, name: 'Vous êtes ici', title: 'Vous êtes ici' }); google.maps.event.addListener(marker, 'click', function () { infowindow.setContent(marker.name); infowindow.open(map, this); }); var requestNearby = { location: myLatLng, //Paramètre de l'endroit ou se trouve la personne radius: distance, types: ['shopping_mall', 'grocery_or_supermarket'], openNow: true }; service = new google.maps.places.PlacesService(map); service.nearbySearch(requestNearby, callbackNearby); function callbackNearby(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { var place = results[i]; createMarker(results[i]); } } } 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); }); }} map = new google.maps.Map(document.getElementById("map"), mapOptions); } $('#searchform').submit(function(e){ 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); }); } //alert('sa marche !'); e.preventDefault(); var myLatLng; console.log(radius); $.ajax({ method : $(this).attr('method'), url : $(this).attr('action'), data : $(this).serialize(), dataType: 'json' }).done(function(data){ if(data.success){ if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { var latU = position.coords.latitude; var lngU = position.coords.longitude; myLatLng = new google.maps.LatLng(latU, lngU); console.log(myLatLng); serviceSearch = new google.maps.places.PlacesService(map); var requestText = { location: myLatLng, radius: radius, query: data['message'], openNow: true }; serviceSearch.textSearch(requestText, callbackText); function callbackText(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { var place = results[i]; createMarker(results[i]); } } } }); } } else { alert('sa ne fonctionne pas correctement!'); } }); return false; });

 <div class="row"> <div class="col-xs-6"> <div class="range"> <input type="range" id="range-input" name="range" min="1000" max="20000" value="1000"> <output id="range-output">1000m</output> </div> </div> </div> </div>

Answer 1

From the documentation the radius needs to be a Number which is the distance in meters; this var distance = radius+'m'; makes it a string.

radius | Type: number The distance from the given location within which to search for Places, in meters. The maximum allowed value is 50 000.