时间戳

首页 > 解决方案 > Laravel，用ajax渲染谷歌地址api

javascript - Laravel，用ajax渲染谷歌地址api

问题描述

我想渲染google api，如果客户选择送货不提货，这是非常必要的，所以他必须通过填写google地址表单添加他的地址，我现在面临的只是包含google表单时，然后我必须添加脚本链接，这就是我收到错误的原因：您在此页面上多次包含 Google Maps JavaScript API。这可能会导致意外错误。这个问题的最佳解决方案是什么？

googleform.blade：

  <input id="autocomplete" class="addressInput-textInput s-form-control input-overflow" onClick="this.select();" onFocus="geolocate()" type="text" autocapitalize="off" autocorrect="off" autocomplete="off" required=""/>

   <script src="https://maps.googleapis.com/maps/api/js?key=0000&libraries=places&callback=initAutocomplete" defer></script>

jQuery：

$.ajax .....

success: function (data) {
            $('#update_order_status').html(data.update_order_status);
        }
    });

控制器：

   $update_order_status = view('include.delivery_information')->render();      
    return Response::json([
        'update_order_status' => $update_order_status,
    ]);

标签： javascriptphpjquerylaravel

解决方案

问题是因为它多次包含 google API 脚本

callback=initAutocomplete从中删除

<script src="https://maps.googleapis.com/maps/api/js?key=0000&libraries=places&callback=initAutocomplete" defer></script>

并在 on change 中调用 initAutocomplete 函数

<input id="autocomplete" class="addressInput-textInput s-form-control input-overflow" onClick="this.select();" onFocus="geolocate()" type="text" autocapitalize="off" autocorrect="off" autocomplete="off" required=""/>

并且只在刀片中添加一次脚本，而不是include.delivery_information

推荐阅读