需要時加載Google Maps JavaScript文件

我有一個頁面，其中包含一個按鈕，用於以模式打開地圖。由於只有很少的用戶會使用這個功能，我想知道是否有可能只在需要的時候加載Google Maps庫（我更喜歡用戶在這種情況下等待，而不是每次頁面加載時等待）。需要時加載Google Maps JavaScript文件

氏是我的模式：

<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>

而且有谷歌地圖的幾個庫：

<!-- 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>

來源

2017-09-20 luca

你有任何延遲加載設置。在你角度的應用程序？像oclazyload？ –

不，我沒有任何延遲加載 – luca

然後，我能想到的最快的解決方案是將腳本標記的負載包裝在指令中，並將其放入您的dialog.html中。所以只有在編譯對話框時才加載腳本。檢查這個答案。 https://stackoverflow.com/questions/19917774/why-ng-scope-is-added-to-javascript-inline-of-my-partial-view-and-makes-alert-no/22476888#22476888結帳解決方案這裏。 –

的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>

來源

2017-09-20 10:36:01 Sluibaren

需要時加載Google Maps JavaScript文件

回答

相關問題