Google地方广告自动填充框不显示任何内容

时间:2014-03-23 12:09:43

标签: javascript google-maps-api-3 autocomplete google-places-api

我正在尝试在我的网站上实现Google places Autocomplete字段,但它不起作用。我尝试将Google提供的样本复制/粘贴到 .html 文件中,它完全有效,就像在网络上找到的其他样本一样,this one所以我可能犯了一个错误。项目(ASP.NET MVC),但我不知道在哪里......

以下是我所做的:

//Loading places library
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

$(document).ready(function () {
    initialize();

    //Some other asynchronous methods loading some partial views, but with no rapport with Google Maps
}

function initialize() {
    var myOptions = { /*various options*/ };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    //4 next lines are given by Autocomplete doc
    var input = document.getElementById('pac-input');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);

    /* Implementation of other tools, like 
     * DrawingManager
     * MarkerClusterer
     * and OverlappingMarkerSpiderfier 
     */

     //This event is given by google
     google.maps.event.addListener(autocomplete, 'place_changed', function() {
        console.log("place_changed"); // Never goes here
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            return;
        }

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
        }
        var address = '';
        if (place.address_components) {
            address = [
              (place.address_components[0] && place.address_components[0].short_name || ''),
              (place.address_components[1] && place.address_components[1].short_name || ''),
              (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
        }
    });
}

HTML就是

<input id="pac-input" class="controls" type="text" placeholder="Enter a location">

这是一个简单的 .html 文件。我可以在控制台的“网络”标签中看到Google服务器的请求,例如:

Network tab OK

但在我的项目中,该字段显示为占位符,但是当我输入时,只有...没有。就像一个简单的文本字段。控制台中的任何东西,只是......任何东西,除了库放置正确下载的脚本。

我尝试更改z-index,但问题仍然存在。我还尝试将Autocomplete字段放在页面的其他位置(而不是谷歌地图本身),它并不关心。

我还尝试将$(document).ready改为google.maps.event.addDomListener(window, 'load', initialize);,问题是......同样的!

哦,顺便说一下,我也尝试使用Autocomplete Search Box,问题完全相同。

有什么明显的东西我不见了吗?要在Google Developpers控制台中激活,要包含在我的项目中,还有什么......我是的新手,所以也许我会忘记一个基本的东西?

0 个答案:

没有答案