Question

我有一个带有起始地址和结束地址的简单表单，我在两个输入上都有自动完成我想限制返回结果只有当它们匹配地图数据上geo.json层添加的边界内的位置时属性使用户无法预订＆＃34;如果它在边界之外，那就是旅行。任何帮助都是有帮助的，它是一个学习项目，如果它是重复的，我会尝试其他线程中提供的答案。在此之前，任何帮助都是有帮助的！

[编辑]


    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);
        }
     });
    }

Answer 1

Google的公共问题跟踪器中有a very long-standing feature request #35822067用于自动填充功能。您可以将其加注星标以接收更新并提高工程团队的可见性，因此希望他们可以在某一天实施。

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

限制特定区域数据层中的Google Map Autocomplete结果

1 个答案: