谷歌地图自动完成按键模拟

Question

当 Ajax 在我的页面上完成运行时，我目前正在运行以下函数，然后加载文本（现在），然后打开自动完成对话框。

    <script type="text/javascript"> $(document).ajaxComplete(function() {
    jQuery('#facetwp-location').val('Richmond, Vic'); // populate the input box
    google.maps.event.trigger( document.querySelector('#facetwp-location'), 'focus', {} ); // force the autocomplete to show
    });

</script>

我需要做以下事情：

1. 从 BuddyPress Xprofile 字段中获取用户位置信息（将替换预先编写的文本）
2. 自动加载自动完成列表中的第一项（即模拟一个按键并在显示的列表上输入

再一次，我的jQuery技能欠缺，需要一些帮助才能完成这个功能。

我已经完成了，到目前为止已经完成了 - 但它仍然不完整

function get_user_location_for_facet_load(){
if (is_page(2101)) {
?>
<script type="text/javascript"> 
$(function() { 
$(document).ajaxStop(function() {
jQuery('#facetwp-location').val('<?php
$user_id = bp_loggedin_user_id();
echo xprofile_get_field_data('Suburb',$user_id);
?>'); // populate the input box
$('#facetwp-location').focus();
google.maps.event.trigger( document.querySelector('#facetwp-location'), 'focus', {} ); // force the autocomplete to show
$( ".pac-container .pac-item:first" ).promise().done(function() {
google.maps.event.trigger( document.querySelector('.pac-container .pac-item'), 'focus', {} ); 
 google.maps.event.trigger(document.querySelector('.pac-container .pac-item'), 'keydown', {
        keyCode: 13
    });

//var txt = $('#facetwp-location').val();
//alert(txt);
});
});
});
</script>
<?php
}

不确定我是否更接近，但是否有人可以提供帮助。

Answer 1

您的代码看起来正确，但请尝试将您的代码包含在 $.ready() 中，例如，

$(function() { // enclose your ajax complete in document ready function
    $(document).ajaxComplete(function() {
       jQuery('#facetwp-location').val('Richmond, Vic'); // populate the input box
       google.maps.event.trigger( document.querySelector('#facetwp-location'), 'focus', {} ); // force the autocomplete to show
    });
});

或者，尝试在输入上使用.keypress() 并在其处理程序中触发谷歌地图，例如

$(function() { // enclose your ajax complete in document ready function
    $(document).ajaxComplete(function() {
       jQuery('#facetwp-location').val('Richmond, Vic').keypress(function(){
          google.maps.event.trigger(this, 'focus', {} ); // force the autocomplete to show
       });
       jQuery('#facetwp-location').trigger('keypress');
    });
});

更新了，使用了谷歌代码，

 $(function() {
   var lat = -33.8688,
     lng = 151.2195,
     latlng = new google.maps.LatLng(lat, lng),
     image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';

   var mapOptions = {
       center: new google.maps.LatLng(lat, lng),
       zoom: 13,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     },
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
     marker = new google.maps.Marker({
       position: latlng,
       map: map,
       icon: image
     });

   var input = document.getElementById('facetwp-location');
   var autocomplete = new google.maps.places.Autocomplete(input, {
     types: ["geocode"]
   });

   autocomplete.bindTo('bounds', map);
   var infowindow = new google.maps.InfoWindow();

   google.maps.event.addListener(autocomplete, 'place_changed', function() {
     infowindow.close();
     var place = autocomplete.getPlace();
     if (place.geometry.viewport) {
       map.fitBounds(place.geometry.viewport);
     } else {
       map.setCenter(place.geometry.location);
       map.setZoom(17);
     }

     moveMarker(place.name, place.geometry.location);
   });

   $("#facetwp-location").focus(function() {
     selectFirstResult();
   });


   function selectFirstResult() {
     infowindow.close();
     $(".pac-container").hide();
     var firstResult = $('#facetwp-location').val();
     var geocoder = new google.maps.Geocoder();
     geocoder.geocode({
       "address": firstResult
     }, function(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
         var lat = results[0].geometry.location.lat(),
           lng = results[0].geometry.location.lng(),
           placeName = results[0].address_components[0].long_name,
           latlng = new google.maps.LatLng(lat, lng);

         moveMarker(placeName, latlng);
       }
     });
   }

   function moveMarker(placeName, latlng) {
     marker.setIcon(image);
     marker.setPosition(latlng);
     infowindow.setContent(placeName);
     infowindow.open(map, marker);
   }

   $('#facetwp-location').trigger('focus');
 });

#map_canvas {
  width: 100%;
  height: 400px;
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCsaZtFeCU6YCKI_1D_tJ73JzARq9j6zaY&libraries=places"></script>
<input id="facetwp-location" value="Richmond, Vic" type="text" size="50" />
<div id="map_canvas"></div>