Question

我已将Google MAP地方自动填充API用于网络。

<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）如果我在选择自动完成时按Enter键则会加载整个页面，但是如果我使用鼠标选择自动完成选项页面则无法加载。

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

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

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

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

Answer 1

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

加载Google Place Autocomplete API Html上的问题

1 个答案: