Radius忽略了谷歌地图API

时间:2016-03-17 09:10:24

标签: javascript google-maps google-maps-api-3 radius

我希望看到从滑块恢复的兴趣点,但我觉得不考虑属性半径。 当我尝试更改值时,我看到了更改,但这不是一个好结果。 半径是米? 你能帮助我吗? 提前谢谢你

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>

1 个答案:

答案 0 :(得分:0)

从文档中radius需要是数字,这是以米为单位的距离;这个var distance = radius+'m';使它成为一个字符串。

  

半径|类型:数字   距离搜索位置的给定位置的距离,以米为单位。允许的最大值为50 000。

相关问题