Google Maps v3 - ngăn API tải phông chữ Roboto

Google thêm kiểu vào vùng chứa bản đồ ghi đè kiểu của tôi.
Tôi biết cách khắc phục điều này. Nhưng API (v3.8/9/exp) cũng tải webfont "Roboto" mà tôi không thực sự cần/muốn.Google Maps v3 - ngăn API tải phông chữ Roboto

Có bất kỳ cài đặt/tùy chọn/cách nào xung quanh vấn đề này không?
Tôi có thể ngăn API thêm CSS bổ sung không?

Đây là mã google-map-API thêm vào <head> trang của tôi:

<style type="text/css"> 
    .gm-style .gm-style-cc span, 
    .gm-style .gm-style-cc a, 
    .gm-style .gm-style-mtc div { 
    font-size:10px 
    } 
</style> 

<link type="text/css" 
     rel="stylesheet" 
     href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> 

<style type="text/css"> 
    @media print { 
    .gm-style .gmnoprint, 
    .gmnoprint { 
     display:none 
    } 
    } 
    @media screen { 
    .gm-style .gmnoscreen, 
    .gmnoscreen { 
    display:none 
    } 
    } 
</style> 
<style type="text/css"> 
    .gm-style { 
    font-family: Roboto,Arial,sans-serif; 
    font-size: 11px; 
    font-weight: 400; 
    text-decoration: none 
    } 
</style>

Nguồn

2014-08-27 pkyeck

Đó có phải là đầu ra không? Thật khó để nói những gì mã chính nó đang tham khảo. –

@JoshBurgess yep, đây là những gì google thêm vào '' khi bao gồm bản đồ-api-javascript – pkyeck

Thiếu sử dụng phiên bản cũ hơn của gmapsAPI, tôi không thể tìm cách ngăn Roboto truy cập mà không chặn yêu cầu cho miền đó từ Apache, IIS hoặc bất kỳ thứ gì tương đương bạn đang sử dụng. Nếu thế là đủ, tôi sẽ bật nó thành một câu trả lời, nhưng nó có vẻ giống như một sự phản đối với tôi. –

Bạn có thể thay thế các phương pháp insertBefore trước khi kịch bản Google gọi nó:

http://jsfiddle.net/coma/7st6d9p2/

var head = document.getElementsByTagName('head')[0]; 

// Save the original method 
var insertBefore = head.insertBefore; 

// Replace it! 
head.insertBefore = function (newElement, referenceElement) { 

    if (newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) { 

     console.info('Prevented Roboto from loading!'); 
     return; 
    } 

    insertBefore.call(head, newElement, referenceElement); 
}; 

// Check it! 
new google.maps.Map(document.getElementById('map'), { 
    center   : new google.maps.LatLng(51.508742,-0.120850), 
    zoom    : 16, 
    mapTypeId  : google.maps.MapTypeId.ROADMAP, 
    streetViewControl: false, 
    zoomControl  : false, 
    panControl  : false, 
    mapTypeControl : false 
});

Nguồn

2014-09-18 00:06:32 coma

cảm ơn câu trả lời. đã hy vọng cho một số loại API-tùy chọn bạn có thể sử dụng nhưng điều này 'hack' chắc chắn hoạt động :) – pkyeck

Tôi đã không tìm thấy bất cứ điều gì trên tài liệu của họ, đoán rằng họ muốn bảo tồn phong cách của nó. Btw, một khi tải phông chữ được ngăn chặn, bạn có thể hoàn nguyên thay đổi để bỏ qua điều đó nếu trên mỗi cuộc gọi insertBefore. – coma

tuyệt vời! và tiết kiệm băng thông mạng! –

CẬP NHẬT 10/2017

Google đã thay đổi cách tiếp cận cách họ chèn kiểu trên trang. Hiện tại, họ chèn một phần tử rỗng style và sau đó thay đổi nội dung của phần tử kiểu này bằng phông chữ Robot. Đây là một giải pháp mới:

// Preventing the Google Maps libary from downloading an extra font 
(function() { 
    var isRobotoStyle = function (element) { 

     // roboto font download 
     if (element.href 
      && element.href.indexOf('https://fonts.googleapis.com/css?family=Roboto') === 0) { 
      return true; 
     } 
     // roboto style elements 
     if (element.tagName.toLowerCase() === 'style' 
      && element.styleSheet 
      && element.styleSheet.cssText 
      && element.styleSheet.cssText.replace('\r\n', '').indexOf('.gm-style') === 0) { 
      element.styleSheet.cssText = ''; 
      return true; 
     } 
     // roboto style elements for other browsers 
     if (element.tagName.toLowerCase() === 'style' 
      && element.innerHTML 
      && element.innerHTML.replace('\r\n', '').indexOf('.gm-style') === 0) { 
      element.innerHTML = ''; 
      return true; 
     } 
     // when google tries to add empty style 
     if (element.tagName.toLowerCase() === 'style' 
      && !element.styleSheet && !element.innerHTML) { 
      return true; 
     } 

     return false; 
    } 

    // we override these methods only for one particular head element 
    // default methods for other elements are not affected 
    var head = $('head')[0]; 

    var insertBefore = head.insertBefore; 
    head.insertBefore = function (newElement, referenceElement) { 
     if (!isRobotoStyle(newElement)) { 
      insertBefore.call(head, newElement, referenceElement); 
     } 
    }; 

    var appendChild = head.appendChild; 
    head.appendChild = function (textNode) { 
     if (!isRobotoStyle($(textNode)[0])) { 
      appendChild.call(head, textNode); 
     } 
    }; 
})();

ORIGINAL ĐÁP

Nhờ hôn mê cho các giải pháp! Tôi cũng quyết định chặn các kiểu ghi đè phông chữ, họ phông chữ và cỡ chữ. Giải pháp hoàn chỉnh cho trình duyệt hiện đại và IE8 +:

// Preventing the Google Maps libary from downloading an extra font 
var head = $('head')[0]; 
var insertBefore = head.insertBefore; 
head.insertBefore = function (newElement, referenceElement) { 
    // intercept font download 
    if (newElement.href 
     && newElement.href.indexOf('https://fonts.googleapis.com/css?family=Roboto') === 0) { 
     return; 
    } 
    // intercept style elements for IEs 
    if (newElement.tagName.toLowerCase() === 'style' 
     && newElement.styleSheet 
     && newElement.styleSheet.cssText 
     && newElement.styleSheet.cssText.replace('\r\n', '').indexOf('.gm-style') === 0) { 
     return; 
    } 
    // intercept style elements for other browsers 
    if (newElement.tagName.toLowerCase() === 'style' 
     && newElement.innerHTML 
     && newElement.innerHTML.replace('\r\n', '').indexOf('.gm-style') === 0) { 
     return; 
    } 
    insertBefore.call(head, newElement, referenceElement); 
};

Nguồn

2016-03-14 16:33:54

Google Maps v3 - ngăn API tải phông chữ Roboto

Trả lời

Các vấn đề liên quan