Question

我有以下Google自动填充脚本：第一个功能加载Google自动填充功能，第二个功能选择从下拉列表中选择位置后的纬度和长值。

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

    <script type="text/javascript">
    function initialize() {
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            document.getElementById('Place').value = place.name;
            document.getElementById('Lat').value = place.geometry.location.lat();
            document.getElementById('Lng').value = place.geometry.location.lng();
            //alert("This function is working!");
            //alert(place.name);
           // alert(place.address_components[0].long_name);

        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

当我只使用带有id="searchTextField"输入的表单时，一切都正常加载，我可以从下拉列表中选择位置。

但是，在同一页面上，我使用标记加载Google地图，以显示靠近用户输入位置的搜索结果。我加载了以下Google Maps API脚本：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"></script>

现在，如果我首先加载此脚本（取决于我的.html文件中的顺序），我将获得一个没有标记和工作自动完成的地图，或者带有标记且没有自动完成的正确地图。

我认为这可能是因为它是相同的脚本，但如果我只加载第一个脚本，我会得到一张空白地图（根本没有地图，只有空格）

编辑JS CONSOLE LOG：

我明白了：

InvalidValueError：setMap：不是Map的实例;而不是      StreetViewPanorama js605的实例;

ReferenceError：找不到变量：locationData; [错误]您已加入Google地图

此页面上多次使用API。这可能会导致意外错误。

Answer 1

您应该只加载一次Google API。您可以同时组合多个库。

如果您想要Google地图和地方API，可以通过

申请

Excel::create('User', function($excel) use ($user_id){ 
  $excel->sheet('Sheet', function($sheet) use($user_id){

     $user = User::where('user_id', $user_id)->select('name', 'email', 'role', 'address')->get();   
  });
})->export('xls');

return redirect('your route');

如果您不需要使用其他回调异步下载它，请将其放在HTML文件的顶部。

这将获取核心和场所API。更多信息可以在这里找到 https://developers.google.com/maps/documentation/javascript/libraries

Answer 2

您无法在一个Google API请求中发送多个回调。所以：

首先定义您的地图并自动搜索：

<script>
    function myPlaceSearch(){
     ....
    }
    function initMap() {
    ....
    }
</script>

然后用单个函数调用它们：

<script>
    function initialize() {
       myPlaceSearch();
       initMap();
    }
</script>

然后在单回调中请求它们：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=[API KEY]&libraries=places&callback=initialize"></script>

Google自动填充功能不起作用，与Google地图冲突

2 个答案: