Google Place Autocomplete API Html 上的加载问题

Question

我已使用 Google MAP Place Autocomplete API for web。

For code and output click here.

<form>
   <input id="origin-input" type="text" class="form-control" placeholder="From"/> <br/>              
   <input id="destination-input" type="text" class="form-control" placeholder="To"/> <br/>

   <div>
      <button id="NOW" onclick="selectDateTime(this.id)">NOW</button>
      <button id="LATER" onclick="selectDateTime(this.id)">LATER</button>
   </div> <br/>       
   <div id="now_later" > </div>

   <button onclick="handleMap()">SUBMIT</button>

   <script>
      function selectDateTime(elemId){
         var html = '';
         if (elemId == "NOW") {
            html += '<div class="btn-group btn-group-justified" id="within_now">';
            html += '<div class="btn-group" >';
            html += '15 Min <input type="radio" name="within_min" id="within_min" value="15">&nbsp;&nbsp;&nbsp;';
            html += '30 Min <input type="radio" name="within_min" id="within_min" value="30">&nbsp;&nbsp;&nbsp;';
            html += '45 Min <input type="radio" name="within_min" id="within_min" value="45" checked="">&nbsp;&nbsp;&nbsp;';
            html += '</div>';
            html += '</div>';                               
         }

         document.getElementById("now_later").innerHTML = html;
      }
      </script>
      </form>
    </div>

    <div id="map" class="service col-sm-4"></div>
    <script>             
        function initMap()                     
           var origin_input = document.getElementById('origin-input');
           origin_input.value = '';
           var destination_input = document.getElementById('destination-input');
           destination_input.value = '';

           /* Set autocomplete on textboxes */
           var autocompleteOrigin;
           var autocompleteDest;
           var map = null;
           map = new google.maps.Map(document.getElementById('map'), {
                 center: {lat: 20.5937, lng: 78.9629}, zoom: 8});
           var infoWindow = new google.maps.InfoWindow({map: map});

           // HTML5 geolocation. (Loads when page 1st loads - marks your current location on map)
           if (navigator.geolocation) {
                 navigator.geolocation.getCurrentPosition(function(position){
                        var pos = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };

                        infoWindow.setPosition(pos);
                        infoWindow.setContent('Location found.');
                        map.setCenter(pos);
                    }, function() {
                        handleLocationError(true, infoWindow, map.getCenter());
                    });
                } else {
                    // Browser doesn't support Geolocation
                    handleLocationError(false, infoWindow, map.getCenter());
                }

               /*Set autocomplete on textboxes*/
                autocompleteOrigin = new google.maps.places.Autocomplete(origin_input);
                autocompleteDest = new google.maps.places.Autocomplete(destination_input);

                 /*Set directionService*/
                var directionsService = new google.maps.DirectionsService;
                var directionsDisplay = new google.maps.DirectionsRenderer;
                directionsDisplay.setMap(map);


                // Create the search box and link it to the UI element.

                var travel_mode = 'DRIVING';

                /* add bounds to map */
                autocompleteOrigin.bindTo('bounds', map);
                autocompleteDest.bindTo('bounds', map);

                function expandViewportToFitPlace(map, place) {
                    if (place.geometry.viewport) {
                        map.fitBounds(place.geometry.viewport);
                    } else {
                        map.setCenter(place.geometry.location);
                        map.setZoom(17);
                    }
                }

                var origin_place_id = null, destination_place_id = null;

                // set place_changed listner on autocomplete text boxes
                autocompleteOrigin.addListener('place_changed', function() {
                    var place = autocompleteOrigin.getPlace();
                    if (!place.geometry) {
                        window.alert("Autocomplete's returned place contains no geometry");
                        return;
                    }

                    expandViewportToFitPlace(map, place);

                    // If the place has a geometry, store its place ID and route if we have
                    // the other place ID
                    origin_place_id = place.place_id;
                    route(origin_place_id, destination_place_id, travel_mode,
                            directionsService, directionsDisplay);
                });

                autocompleteDest.addListener('place_changed', function() {
                    var place = autocompleteDest.getPlace();
                    if (!place.geometry) {
                        window.alert("Autocomplete's returned place contains no geometry");
                        return;
                    }
                    expandViewportToFitPlace(map, place);

                    // If the place has a geometry, store its place ID and route if we have
                    // the other place ID
                    destination_place_id = place.place_id;
                    route(origin_place_id, destination_place_id, travel_mode,
                            directionsService, directionsDisplay);
                });

我面临的问题是：

1) 如果我在选择自动完成时按回车键会加载整个页面，但是如果我使用鼠标选择自动完成选项页面不会加载。

2) 点击 NOW 按钮后，整个页面会加载，而不是仅仅更新 div now_later

3) 点击提交按钮后，整个页面再次加载

我不希望在单击任何按钮或更新自动完成时加载我的页面。 由于自动完成位置 API，我面临这个问题。 我的最终目标是在用户输入源和目的地后绘制源和目的地之间的路线。然后，如果用户点击现在，一个 div 应该会展开。 此外，当用户点击提交时，地图将更新为其他内容。

请帮助我。告诉我哪里出了问题以及如何纠正它。即使你能解决一个很棒的问题。 提前致谢。

Answer 1

只需将<form> 标记替换为<div> 标记即可解决加载问题，还允许使用回车键选择自动完成中的选项。