使用 Google Maps API 的 jQuery 地理编码和地点自动完成 - geocomplete

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 引用。我现在遇到的问题是我在同一页面上使用了两个多个谷歌 API。我正在使用一个用于谷歌地图和一个用于自动完成位置输入字段。我怎样才能结合这些？它们如下

自动完成 =

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

谷歌地图 =

<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”的问题。我没有用不同的参数调用谷歌 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

结果 ;)

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

保罗