需要时加载Google Maps javascript文件

Question

我有一个页面与一个按钮，以打开一个模式的地图。由于用户使用此函数的次数很少，因此我想知道是否可以仅在需要时加载Google Maps库(我更希望用户在这种情况下等待，而不是每次加载页面时都等待)。

这是我的模式：

<div class="modal" id="showBuildingsMaps" data-backdrop="static"
    data-keyboard="false">
    <div class="modal-dialog modal-lg">
       <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Select building</h4>
            </div>
            <div class="modal-body">
                <div class="box-body" style="height: 80vh;">
                    <ng-map zoom="3" center="[{{selectedBuilding.latitude}}, {{selectedBuilding.longitude}}]" default-style="false"> 
                       <marker ng-repeat="m in markers" position="{{m.latitude}},{{m.longitude}}" title="{{m.name}}"
                                        on-click="buildingFromMaps(m)"></marker> </ng-map>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

Google Maps有几个库：

<!-- Maps -->
<script
    src="https://maps.googleapis.com/maps/api/js?key={myKey}"
    type="text/javascript">
    </script>
<!-- is useful to avoid google not found exception before this script was loaded bedore google maps -->
<script defer
    th:src="@{/static/assets/plugins/angular-maps/ng-map.min.js}"
    type="text/javascript"></script>
<script
    src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markerclusterer.js"
    type="text/javascript"></script>
<script>
    MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ 
      = 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m';  //changed image path 
  </script>

Answer 1

添加onclick到你的按钮

<button type="button" onclick="loadGoogleMaps()" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>

然后是这样的东西

<script>
function loadGoogleMaps() {
var mapScript = document.createElement('script');
mapScript.src = put your source here;

document.head.appendChild(script);
}
</script>