强制用户从谷歌地图 API 自动完成中选择地址

Question

我使用谷歌地图 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

提前感谢！

Answer 1

如果你使用的是jQuery。

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

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

Answer 2

1. 首先，获取在位置输入框中输入的值
2. 使用自动完成服务获取具有该值的预测
然后检查位置值是否与预测
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);