admin管理员组

文章数量:1410706

I am trying to bias google.maps.places.Autoplete based on location and radius (). The following returns results, but based on the client's IP and not my specified location. How is Google maps autoplete properly biased for location? /

var autoplete = new google.maps.places.Autoplete(
  document.getElementById('address'), {
    types: ['geocode'],
    radius: 1000,
    location:[47.64864,-122.348927]
  }
);

I am trying to bias google.maps.places.Autoplete based on location and radius (https://developers.google./places/webservice/autoplete#location_biasing). The following returns results, but based on the client's IP and not my specified location. How is Google maps autoplete properly biased for location? http://jsbin./nazufozeyu/1/

var autoplete = new google.maps.places.Autoplete(
  document.getElementById('address'), {
    types: ['geocode'],
    radius: 1000,
    location:[47.64864,-122.348927]
  }
);
Share Improve this question edited Mar 26, 2015 at 16:44 user1032531 asked May 31, 2014 at 14:16 user1032531user1032531 26.4k75 gold badges245 silver badges416 bronze badges 1
  • I'm guessing your format for the location is the problem. In general with the Google Maps Javascript API you must either use a google.maps.LatLng object, or a latlng literal like {lat:47.64864,lng:-122.348927} – bart Commented Dec 6, 2017 at 15:22
Add a ment  | 

2 Answers 2

Reset to default 4

I am sure this could be done better, but the following will work. http://jsbin./vetayoreto/1/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>google.maps.places.Autoplete</title>  
        <style type="text/css">
            input{width:600px; display:block;}
        </style> 
        <script type="text/javascript" src="//maps.googleapis./maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>
    </head>
    <body>
        <input id="input" type="text" value="" />
        <script>
            var center = new google.maps.LatLng(40.7,-74);
            var circle = new google.maps.Circle({
                center: center,
                radius: 10000
            });
            var autoplete5 = new google.maps.places.Autoplete(
                document.getElementById('input'),
                {
                    types: ['geocode']
                }
            );
            autoplete5.setBounds(circle.getBounds());
        </script>
    </body> 
</html> 

So, after checking the API, it looks like the location you're providing is probably being ignored. You have options on what you can do, but you need to provide a bounds attribute in your options of type LatLngBounds. See the autoplete options API: https://developers.google./maps/documentation/javascript/reference#AutopleteOptions

You can provide a Circle, Rectangle, Polyline, etc, then pull the bounds from it. Regardless of how you do it, you need to provide a bounds of which to search in, you can't just provide a single lat-long point. @user1032531 provided a good example of how you might do it with a circle.

If you have a certain city/country in mind you want to search in, you can use the geocoding API: https://developers.google./maps/documentation/geocoding/

Call the API like this: https://maps.googleapis./maps/api/geocode/json?address=Toledo&key=API_KEY and you'll get some JSON back that has a "bounds" key. Take your boundbox, and pass it to the places API call.

本文标签: javascriptBias google maps autocomplete using location and radiusStack Overflow