限制特定区域数据层内的谷歌地图自动完成结果[重复]答案

【问题标题】：Restrict Google Map Autocomplete results within specific area data layer [duplicate]限制特定区域数据层内的谷歌地图自动完成结果[重复]
【发布时间】：2018-04-04 20:41:05
【问题描述】：

我有一个带有起始地址和结束地址的简单表单，我对两个输入都有自动完成功能我想限制返回结果，只有当它们与地图数据上 geo.json 层添加的边界内的位置匹配时属性，以便用户无法“预订”超出边界的行程。任何帮助都是有帮助的，这是一个学习项目，对不起，如果它是重复的，我尝试了其他线程中提供的答案。在此先感谢任何帮助都会有所帮助！

[编辑]


    const debug = true;

    if(debug === true){
      console.log('[DEBUG] >', debug);
    } 

    const getQuoteBtn = document.getElementById('get-quote');
    const startAddress = document.getElementById('start_address');
    const dropoffAddress = document.getElementById('dropoff_address');

    const startAddressAutocomplete = new 
    google.maps.places.Autocomplete(startAddress, {
    types: ['geocode'],
    componentRestrictions: { 
      country: 'fr',
    }
    });

    const dropoffAddressAutocomplete = new 
    google.maps.places.Autocomplete(dropoffAddress, {
    types: ['geocode'],
    componentRestrictions: { 
      country: 'fr',
    }
    });

    const directionsService = new google.maps.DirectionsService;
    const directionsDisplay = new google.maps.DirectionsRenderer;

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

    getQuoteBtn.addEventListener('click', getQuote);

    function initMap(){
     var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 8,
       center: {lat: 48.7554899, lng: 2.33333}
    });

    const dataLayer = map.data;
    dataLayer.loadGeoJson('./google.json');
    dataLayer.setStyle({
    fillColor: 'rgba(0,0,0,0.2)',
    strokeWeight: 0.2
    });

    directionsDisplay.setMap(map); 
    }

    function getQuote(e){
    e.preventDefault();

    if(debug === true){
    console.log('[DEBUG] getQuote() startAddress.value, 
     dropoffAddress.value > ', startAddress.value, dropoffAddress.value);
    }   

    if(startAddress.value && dropoffAddress.value != ''){
      calculateAndDisplayRoute(directionsService, directionsDisplay, 
       startAddress.value, dropoffAddress.value); 
     } else {
      alert('empty input');
     }
    }   

    function calculateAndDisplayRoute(directionsService, 
    directionsDisplay, start, end) {  

    if(debug === true){
      console.log('[DEBUG] calculateAndDisplayRoute() > ', start, end);
    }   

    directionsService.route({
        origin: start,
        destination: end,
        travelMode: 'DRIVING', 
        avoidTolls: true, 
        // get distance
        region: 'fr'
      }, function(response, status) {
        // console.log(reponse);
        // recuperer la distance et le temps
        if (status === 'OK') {
          directionsDisplay.setDirections(response);
          // get trip duration
          const routeDuration = response.routes[0].legs[0].duration.text;
          getTotal(routeDuration, directionsDisplay.getDirections());
          // debug
          if(debug === true){
            console.log('[DEBUG] calculateAndDisplayRoute() const route > 
            ', routeDuration);
          }
        } else {
          alert('Please contact us' + status);
        }
     });
    }

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

Google 的公共问题跟踪器上有 a very long-standing feature request #35822067 用于自动完成中的此功能。您可以为其加注星标以接收更新并提高工程团队的知名度，因此希望他们有一天会实施。

否则，您可以尝试在 AutocompleteOptions 中使用 strictBounds: true 并使用以要搜索的城市为中心的边界框。但是，如果用户手动移动边界框，这可能无法保证有效。

【讨论】：