Cách chặn gmap khi không có kết nối internet

Question

Tôi đang sử dụng thành phần PrimeFaces gmap, để có thể sử dụng dịch vụ Google Maps. Nó hoạt động tốt cho tôi, nhưng tôi có một vấn đề. Khi không có kết nối internet, giao diện người dùng của tôi hoàn toàn bị chặn. Có cách nào để giải quyết vấn đề này, bằng cách không hiển thị gmap trong trường hợp không có kết nối internet? Đây là mã của tôi:

<p:gmap id="geoGmap" widgetVar="geoMap" center="#{managedBean.centerGeoMap}" zoom="15" type="ROADMAP" model="#{managedBean.geoModel}" style="width:1000px;height:500px" streetView="false" disableDefaultUI="true" > 
    <p:ajax event="geocode" listener="#{managedBean.onGeocode}" update="@this" /> 
</p:gmap> 

Và đây là kịch bản để nhập nó:

<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script> 

Answer 1

Khi không có kết nối internet, giao diện người dùng của tôi hoàn toàn bị chặn

Điều này là do lỗi JavaScript. Bạn có thể thấy nó khi bạn kiểm tra bảng điều khiển JavaScript trong bộ công cụ phát triển của trình duyệt. Nhấn F12 trong Chrome/FF23 +/IE9 + để xem.

Uncaught ReferenceError: google is not defined

Trong Chrome, bạn có thể mở ngăn theo dõi ngăn xếp. Khi bạn nhấp vào dòng đầu tiên, nó đề cập đến kịch bản được tạo ra bởi <p:gmap> trong mã nguồn HTML như hình dưới đây (khoảng trắng bằng tay chèn vào cho dễ đọc):

<script id="geoGmap_s" type="text/javascript"> 
    $(function() { 
     PrimeFaces.cw('GMap', 'geoMap', { 
      id: 'geoGmap', 
      mapTypeId: google.maps.MapTypeId.ROADMAP, // <-- Here, 
      center:new google.maps.LatLng(...),  // <-- and here. 
      ... 
     }); 
    }); 
</script> 

Look, kịch bản nội tuyến này đang cố gắng dereference biến google đó là phải được đặt trong phạm vi cửa sổ bởi tệp JavaScript API của Google Maps. Tuy nhiên, khi không có kết nối internet, khi đó tệp JavaScript API Google Maps không tải được và do đó sẽ không có biến số google trong phạm vi cửa sổ và do đó, tập lệnh #tương ứng này sẽ phát ra lỗi nói rằng biến số google không xác định.

Khi có lỗi không được giải quyết trong ngữ cảnh JavaScript, khi đó việc thực thi JavaScript sẽ dừng lại hoàn toàn. Nói cách khác, các kịch bản còn lại, chẳng hạn như các kịch bản cho các thành phần giao diện người dùng PrimeFaces khác có chức năng phụ thuộc nhiều vào JavaScript, sẽ không được thực thi. Điều đó giải thích quan sát của bạn về "giao diện người dùng của tôi hoàn toàn bị chặn".

Về mặt kỹ thuật, giải pháp khá thẳng về phía trước: <p:gmap> không nên cố thực thi tập lệnh đó khi biến số google không nằm trong phạm vi cửa sổ.

Để đạt được điều đó, bạn cần phải mở rộng các renderer của <p:gmap>, các GMapRenderer, để viết một if (window.google) trực tiếp sau khi bắt đầu của kịch bản:

public class YourGMapRenderer extends GMapRenderer { 

    @Override 
    protected void startScript(ResponseWriter writer, String clientId) throws IOException { 
     super.startScript(writer, clientId); 
     writer.write("if(window.google)"); 
    } 

} 

Để làm cho nó chạy, đăng ký nó như sau trong faces-config.xml nơi <renderer-class> đại diện cho FQN của lớp renderer mở rộng của bạn:

<render-kit> 
    <renderer> 
     <component-family>org.primefaces.component</component-family> 
     <renderer-type>org.primefaces.component.GMapRenderer</renderer-type> 
     <renderer-class>com.example.YourGMapRenderer</renderer-class> 
    </renderer> 
</render-kit> 

sau khi cài đặt, nó sẽ thay đổi kịch bản trả lại như sau:

<script id="geoGmap_s" type="text/javascript"> 
    if (window.google) $(function() { 
     PrimeFaces.cw('GMap', 'geoMap', { 
      ... 
     }); 
    }); 
</script> 

Nói cách khác, chức năng sẽ chỉ được gọi khi window.google là truthy, ví dụ: khi biến google có sẵn trong phạm vi cửa sổ JavaScript.

Điều đó nên tránh lỗi JS và để cho việc thực hiện JS tiếp tục.