Javascript Google Place自动完成API Html的加载问题

我已经使用谷歌地图位置自动完成API的网站

全国妇女组织
后来


提交
函数selectDateTime（elemId）{
var html=''；
如果（elemId==“现在”）{
html+=''；
html+=''；
html+=‘15分钟’；
html+=‘30分钟’；
html+=‘45分钟’；
html+=''；
html+=''；
}
document.getElementById（“now_later”）.innerHTML=html；
}
函数initMap（）
var origin_input=document.getElementById（'origin-input'）；
原点\输入值=“”；
var destination_input=document.getElementById（'destination-input'）；
目的地_输入值=“”；
/*在文本框上设置自动完成*/
var自完全起源；
var自动完成测试；
var-map=null；
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:20.5937，lng:78.9629}，zoom:8}）；
var infoWindow=new google.maps.infoWindow（{map:map}）；
//HTML5地理定位。（第1页加载时加载-在地图上标记您的当前位置）
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
信息窗口。设置位置（pos）；
infoWindow.setContent（'找到位置'）；
地图设置中心（pos）；
}，函数（）{
handleLocationError（true，infoWindow，map.getCenter（））；
});
}否则{
//浏览器不支持地理位置
handleLocationError（false，infoWindow，map.getCenter（））；
}
/*在文本框上设置自动完成*/
autocompleteOrigin=新的google.maps.places.Autocomplete（origin\u输入）；
autocompleteDest=newgoogle.maps.places.Autocomplete（目的地输入）；
/*设置方向服务*/
var directionsService=新的google.maps.directionsService；
var directionsDisplay=新建google.maps.DirectionsRenderer；
方向显示.setMap（地图）；
//创建搜索框并将其链接到UI元素。
var行程模式=‘驾驶’；
/*向地图添加边界*/
autocompleteOrigin.bindTo（'bounds'，map）；
自动完成测试。bindTo（'bounds'，map）；
函数expandViewportToFitPlace（地图、地点）{
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（17）；
}
}
var origin\u place\u id=null，destination\u place\u id=null；
//在自动完成文本框上设置place\u changed listner
autocompleteOrigin.addListener（'place\u changed'，function（）{
var place=autocompleteOrigin.getPlace（）；
如果（！place.geometry）{
警告（“自动完成的返回位置不包含几何体”）；
返回；
}
将ViewPortToFitPlace（地图、地点）展开；
//如果该地点有几何体，请存储其地点ID和路线（如果有）
//另一个地方ID
原点\地点\ id=地点.地点\ id；
路线（起点、地点、目的地、旅行模式、，
方向服务、方向显示）；
});
autocompleteDest.addListener（'place\u changed'，function（）{
var place=autocompleteDest.getPlace（）；
如果（！place.geometry）{
警告（“自动完成的返回位置不包含几何体”）；
返回；
}
将ViewPortToFitPlace（地图、地点）展开；
//如果该地点有几何体，请存储其地点ID和路线（如果有）
//另一个地方ID
目的地地点id=地点。地点id；
路线（起点、地点、目的地、旅行模式、，
方向服务、方向显示）；
});

我面临的问题是：

1） 如果在选择“自动完成”时按enter键，则会加载整个页面，但如果使用鼠标选择“自动完成”选项，则不会加载页面。

2） 单击“立即”按钮，将加载整个页面，而不是稍后更新div NOW\u

3） 单击“提交”按钮，再次加载整个页面

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

请帮帮我。告诉我哪里出了问题以及如何纠正。即使你能解决一个问题，那也太好了。 提前感谢。

只需将

标记替换为

标记即可解决加载问题，并允许使用enter键选择自动完成中的选项。

使用

e。
<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);
                });