Question

我的Javascript / Jquery知识不诚实，但我希望有人可以帮助我。

我正在尝试在我的网站中实现自动完成功能，该功能允许用户开始在输入字段中键入位置，并且自动完成功能会在匹配的位置启动。我偶然发现了一个名为jQuery Geocoding and Places Autocomplete with Google Maps API - geocomplete的JQUERY插件，我很难让它运行起来。

这是我的

一个看起来像这样的网络表单

输入文字html如下

        <!--Location fieldset-->
        <fieldset class="form-group location">
            <div class="col-md-3">
                <label>Location</label>
            </div>
            <div class="col-md-9">
                <input id="geocomplete" class="locationsearch location form-control" type="text" value="" name="geocomplete" placeholder="Enter a location" autocomplete="off">
            </div>
        </fieldset>

在我的主页模板中，我已经添加了以下脚本和类似的引用，以便进行基本使用

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="~/js/jquery.geocomplete.min.js"></script>

<script>
    $(function(){
        $("#geocomplete").geocomplete()});
</script>

我无法使用自动完成功能，我真的不知道为什么？

对不起答案显而易见

非常感谢

编辑*请查看我在浏览器控制台中收到的错误

进一步编辑*我修复了JQUERY引用错误 - 这是因为我试图在我甚至将jQuery加载到页面之前调用jQuery ref。我现在的问题是我在同一页面上使用两个多个谷歌API。我正在使用谷歌地图和一个一个自动完成位置输入字段。我该如何结合这些？它们如下

自动完成=

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&sensor=false"></script>

Google Map =

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initGoogleMaps" type="text/javascript"></script>

Answer 1

我现在已经解决了这个问题。

首先，我必须确保在我尝试创建函数并调用jquery（$）之前在我的网页上正确引用了JQUERY库。

要解决此问题，您已在此页面上多次添加了Google Maps API＆＃39;。我没有使用不同的参数两次调用谷歌API，而是简单地添加它们作为

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&sensor=false&callback=initGoogleMaps"></script>

完整代码如下

<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script src="~/js/jquery.geocomplete.min.js"></script>
<script>
    $(function() {
        $("#location").geocomplete({
            details: ".geo-details",
            detailsAttribute: "data-geo"
        });

    });
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=initGoogleMaps"></script>

请注意，您不需要sensor = false参数= Issue on Loading Google Map - SensorNotRequired

结果;）

如果可以改进，请告诉我。

保

使用Google Maps API进行jQuery地理编码和地方自动填充 - 地理填充

1 个答案: