0

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

提前致谢！

4

2 回答 2

2

如果你使用 jQuery

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

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

于 2013-09-18T08:33:02.427 回答
0
  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);
于 2019-03-29T06:35:34.087 回答