Question

我已按照Google Dev的教程了解如何使用自动完成功能添加位置搜索框：Here

但我似乎无法让它发挥作用。显示该框，我可以输入，但自动完成功能无法正常工作，当我输入并点击返回时没有任何反应。

HTML：

    <div class="col-md-9">
        <input id="pac-input" class="controls" type="text" placeholder="Search Location..."> <!-- Location Search Box -->
        <div id="map-canvas"></div> 
    </div>

使用Javascript：

tidy_maps.initialize = function() {
// Declare the map and its options
var myOptions = {
    center: ireland,
    zoom: 7,
    panControl: false,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.LEFT_TOP
    },

    streetViewControl: false,
};
map = new google.maps.Map(document.getElementById('map-canvas'),
        myOptions);

// Set default bounds for search box - biased towards Ireland
var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(55.51150, -10.22827),
    new google.maps.LatLng(51.43514, -5.43823));

// Add Search Box to Map space
var input = document.getElementById('pac-input');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

var options = {
    bounds: defaultBounds
};

// Create Autocomplete for Search
autocomplete = new google.maps.places.Autocomplete(input, options);

Answer 1

修正：我最初有两个独立的库试图加载：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>

但改为将其加载到1：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places,drawing"></script>

Google Maps API自动填充搜索框

1 个答案: