Cách đợi cho đến khi API bản đồ google đã tải trước khi tải một lớp bắt nguồn từ google.maps.OverlayView bắt nguồn

Question

Tôi có tệp label.js riêng biệt mà trong đó tôi đã xác định lớp phủ tùy chỉnh. Nó sử dụng google.maps.OverlayView làm nguyên mẫu của nó:

Label.prototype = new google.maps.OverlayView(); 

Tôi không chắc chắn vị trí đặt thẻ tập lệnh cho tệp js này trong tệp index.html của tôi. Nếu tôi đặt thẻ tập lệnh bên dưới thẻ tải bản đồ google như vậy:

.... 
     <script async defer 
      src="https://maps.googleapis.com/maps/api/js?... 
     </script> 
     <script src="js/label.js"></script> 
    </body> 
</html> 

Tệp label.js được tải ngay khi bản đồ api chưa được tải gây ra lỗi.

Tôi hiện giải quyết điều này bằng cách tự tải JS trong bản đồ của tôi gọi lại nạp:

function initMap() { 
    gMap = new google.maps.Map(document.getElementById(strMapDivName), { 
     center: {lat: 21, lng: 78}, 
     mapTypeId: google.maps.MapTypeId.HYBRID, 
     zoom: 6, 
     heading: 90, 
     tilt: 0 
    }); 

    // Load label.js afterwards so we can be sure that the google maps api has loaded 
    var fileref=document.createElement('script') 
    fileref.setAttribute("type","text/javascript") 
    fileref.setAttribute("src", "js/label.js") 

    document.getElementsByTagName("head")[0].appendChild(fileref) 

} 

Đây có phải là cách tốt nhất để giải quyết này?

Answer 1

Tôi nghĩ cách bạn làm là tốt. Nếu bạn muốn chắc chắn rằng đối tượng bản đồ đã sẵn sàng, bạn cũng có thể sử dụng trình nghe sự kiện idle của bản đồ.

google.maps.event.addListenerOnce(map, 'idle', function() { 
    // map is ready 
}); 

Answer 2

Đây là một đặc điểm chung mà tôi đã tạo và hoạt động cho tôi.

1) Xác định các chức năng bạn muốn thực hiện sau khi Google bản đồ được nạp

function ToExecuteAfterLoaded() 
    { 
    // Doing something here /// 
    console.log("Executing this function"); // per example // 
    } 

2) chức năng

function WhenGoogleLoadedDo(fnt) 
    { 
    if(typeof google != 'undefined') 
     fnt(); 
    else 
     setTimeout(function() 
     {(function(fnt) 
      { 
      WhenGoogleLoadedDo(fnt) 
      })(fnt)}, 500); // You can set timer as you wish // 
    } 

3) Gọi ToExecuteAfterLoaded như thế này trong kịch bản của bạn chờ

WhenGoogleLoadedDo(ToExecuteAfterLoaded); 

Answer 3

Điều gì về gói nhãn tùy chỉnh của bạn với DOMContentLoaded?

 document.addEventListener("DOMContentLoaded", function(event) { 
      Label.prototype = new google.maps.OverlayView(); 
     }); 

tham khảo: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded