强制用户从google maps api autocomplete中选择地址

Posted 2023-02-03

我有这个距离计算器使用谷歌地图api，我试图有两个自动完成表格的开始和结束地址....它完美的工作，除了我想强迫用户从下拉菜单中选择，而不是允许他们如果他们不这样做继续

继承人的代码

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

function initialize() 
  var map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  );

  //draw the map
     var rendererOptions = 
      map: map,
  preserveViewport: false,
      suppressMarkers : true
    
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)

   directionsDisplay.setMap(map);


  var input = (document.getElementById('start'));
  var searchBox = new google.maps.places.SearchBox(input);
  var input2 = (document.getElementById('end'));
  var searchBox2 = new google.maps.places.SearchBox(input2);

  var markers = [];

  google.maps.event.addListener(searchBox, 'places_changed', function() 
    var places = searchBox.getPlaces();

    for (var i = 0, marker; marker = markers[i]; i++) 
      marker.setMap(null);
     

    markers = [];
     var bounds = new google.maps.LatLngBounds();
     for (var i = 0, place; place = places[i]; i++) 
      var marker = new google.maps.Marker(
         map: map,
         icon: 'http://www.driveu.com/images/pmarker.png',
         title: place.name,
         position: place.geometry.location
      );

       markers.push(marker);
       bounds.extend(place.geometry.location);
     

    map.fitBounds(bounds);
        map.setZoom(15);
  );

  google.maps.event.addListener(searchBox2, 'places_changed', function() 
    var places = searchBox2.getPlaces();

    for (var i = 0, marker2; marker2 = markers[i]; i++) 
      marker2.setMap(null);
    

    markers = [];
   var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) 
     var marker2 = new google.maps.Marker(
        map: map,
        icon: 'http://www.driveu.com/images/markerlarge.png',
        title: place.name,
        position: place.geometry.location
      );

      markers.push(marker2);
      bounds.extend(place.geometry.location);
    

    map.fitBounds(bounds);
        map.setZoom(15);
  );

  google.maps.event.addListener(map, 'bounds_changed', function() 
    var bounds = map.getBounds();
     searchBox.setBounds(bounds);
  );
 

function calcRoute() 
   var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = 
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  ;
 directionsService.route(request, function(response, status) 
if (status == google.maps.DirectionsStatus.OK) 
  directionsDisplay.setDirections(response);

    var calc_distance = response.routes[0].legs[0].distance.value; 
        var drivingDistanceMiles = calc_distance / 1609.344;
        var drivingDistanceMiles = Math.round(drivingDistanceMiles*100)/100;

        var drivingrate1 = Math.round((drivingDistanceMiles*3.00)+2.80);
        var drivingrate2 = Math.round(((drivingDistanceMiles*3.00)+2.80)*1.15);
        document.getElementById('results').innerhtml = '<div id="next_line" style="display:none"><div style=" margin-right:5%; width:45%; float:left;"><strong> distance:</strong><br/><div style="background:#333; padding:15px; font-size:22px; color:#bbb;">'+drivingDistanceMiles+' <span style="font-size:12px;"> miles </span></div></div><div style=" width:50%; float:left;"><strong> estimate:</strong><br/>   <div style="background:#333; padding:15px; font-size:22px; color:#bbb;">$'+drivingrate1+' <span style="font-size:12px;"> to </span> $'+drivingrate2+'</div></div></div>';
    
 );

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

继承人演示http://driveu.com/index2.php

提前致谢！

答案

如果你正在使用jQuery

$( document ).ready(function() 
  $( "form" ).submit(function( event ) 
    if $('form input.map_select_box').val() == ''
       event.preventDefault();
    end
  );
);

http://api.jquery.com/submit/

另一答案

1. 首先，获取在位置输入框中输入的值
2. 使用AutocompleteService获取具有该值的预测
3. 然后检查位置值是否与预测匹配，如果值与预测不匹配则表示用户未从自动完成下拉列表中选择位置

var displaySuggestions = function(predictions, status) 
    let valid_location = false;
    if (status != google.maps.places.PlacesServiceStatus.OK) 
        alert(Invalid location);
        return;
    

    predictions.forEach(function(prediction) 

        if( $("#location").val().replace(/\s/g,'').toLowerCase() == prediction.description.replace(/\s/g,'').toLowerCase() )
            valid_location = true;
        

    );
    if(valid_location)
        alert(Valid location);
    
    else
        alert(Invalid location);
    
  ;
var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions( input: $("#location").val() , displaySuggestions);