【问题标题】:Google Maps API v3: Radius parameter doesn't seem to limit autocomplete resultsGoogle Maps API v3:半径参数似乎不会限制自动完成结果
【发布时间】:2013-04-25 21:07:50
【问题描述】:

我试图通过componentRestrictions 设置国家和radius 设置半径来将自动完成结果限制在一个城市,如下所述: https://developers.google.com/maps/documentation/javascript/places

不幸的是,国家限制有效,而不是半径(在这种情况下,它应该将地址限制在 500 米内)!你能帮帮我吗?

<script src="https://maps.googleapis.com/maps/api/js?&amp;sensor=false&amp;region=it&libraries=places"></script>

    <script>
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myLatlng = new google.maps.LatLng(41.88994,12.51383);

    var mapOptions = {
        zoom:16,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: myLatlng,
        styles: [
            {
                featureType: "poi.business",
                elementType: "labels",
                stylers: [
                        { visibility: "off" }
                ]
            }
        ]
      }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));


    var input = document.getElementById('start');
var options = {
  types: ['geocode'],
  componentRestrictions: {country: 'it'},
radius: '500',
};
    var autocomplete = new google.maps.places.Autocomplete(input, options);

    autocomplete.bindTo('bounds', map);


    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'My Marker'
    });





    }



    function calcRoute() {
        var start = document.getElementById('start').value;
        if (start.indexOf("Roma") === -1) {
            start += ", Roma";
        }
          var end = "Via Tiburtina 500, Roma";
          var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.TRANSIT
          };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

    <form onsubmit="calcRoute(); return false">
        <input type="text" id="start" name="start" placeholder="Indirizzo di partenza" style="margin-left:5px;width:200px">
        <input type="submit" value="Vai">
    </form>


        <div id="map-canvas" style="width: 927px; margin-top:5px;margin-left:5px; height: 300px; position: relative;"></div>
        <div id="directions-panel"></div>

</body>
</html>

【问题讨论】:

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


【解决方案1】:

places.Autocomplete 没有 radius-option,只有 bounds-option 来限制区域

【讨论】:

  • 是否有一种 latlngbounds 定义器?如何计算矩形的坐标? :)
  • 你可以通过给定的 LatLng 和半径创建一个圆,并使用该圆的 getBounds() 方法来检索边界。
  • 我尝试添加 var bounds = new google.maps.LatLngBounds( new google.maps.LatLng(49.00, -13.00), new google.maps.LatLng(60.00, 3.00)); 但自动完成功能停止工作.. 这些坐标应该是英国的。在这里测试:ffio.it/test_bounds.html
  • 您必须将autocomplete.setBounds() 的调用移到自动完成的创建后面。
  • 好的,现在地图已经加载,但边界没有被遵守(可以在同一个链接检查)。如果我输入“A”,第一个建议是“Australia”、“Austria”...
猜你喜欢
  • 1970-01-01
  • 2012-06-06
  • 2012-08-09
  • 2015-03-25
  • 2014-10-07
  • 1970-01-01
  • 2011-08-10
  • 1970-01-01
  • 2013-10-11
相关资源
最近更新 更多