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

首先，获取在位置输入框中输入的值
使用AutocompleteService获取具有该值的预测
然后检查位置值是否与预测值匹配，如果该值与预测值不匹配，则表示用户尚未从自动填充下拉菜单中选择位置

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

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

2 个答案: