javascript - 为什么嵌入式谷歌地图会改变 Chrome 的字体渲染？

Question

我刚刚尝试了 Why is an embedded google map altering Safari's font rendering? 中提供的解决方案并希望这能解决问题，因为它们都是基于 webkit 的浏览器。

但是，我仍然看到与一些 文本不同，特别是 position: fixed 内的文本将 Google map 添加到页面后的内容部分(即标题和菜单部分)。

我正在使用 Google Maps API 在页面加载时将 map 嵌入页面，如下所示:

$(document).ready(function() {        
    createMap("gmap", "<?php echo $this->business['location']; ?>");
});

function createMap(target, location) {
    var url = "http://maps.google.com/maps/api/geocode/json?address=" + location + "&sensor=false";
    $.getJSON(url,function (data, textStatus, jqXHR) {
        var r = data.results[0];            
        var jobLatLang = new google.maps.LatLng(r.geometry.location.lat, r.geometry.location.lng);
        var mapOptions = {
            zoom: 12,
            center: jobLatLang
        };

        var map, marker;
        map = new google.maps.Map(document.getElementById(target),mapOptions);
        marker = new google.maps.Marker({
            position: jobLatLang,
            map: map,
            title: r.formatted_address
        });
        marker.setMap(map);
        map.panTo(marker.getPosition());
    });
}

如果我阻止对 createMap 的调用文本渲染没有问题(当然这也意味着没有 map )，我不知道为什么这会导致在 position: fixed 内渲染文本。可能重新渲染的元素？

有什么想法吗？

更新: 我现在已经能够得到 <div>包含 map 的元素通过添加 style="-webkit-transform:none !important;" 来防止添加任何进一步的翻译但是问题仍然存在。

更新 2: 我刚刚发现了一个可怕的解决方法，它只是确认问题，而不是修复问题。使用 Is it possible to remove inline styles with jQuery? 中的以下函数

(function($)
{
    $.fn.removeStyle = function(style)
    {
        var search = new RegExp(style + '[^;]+;?', 'g');

        return this.each(function()
        {
            $(this).attr('style', function(i, style)
            {
                return style.replace(search, '');
            });
        });
    };
}(jQuery));

并在 $.getJSON 之后添加这段糟糕的代码打电话

setTimeout(function() {
    $("#" + target).removeStyle("-webkit-transform");
    $("#" + target).find("*").each(function() {
         $(this).removeStyle("-webkit-transform");
    });
}, 5000);

删除所有内联后模糊文本消失-webkit-transform样式。

更新 3: 我决定只使用这个变通办法，它是更新 2 的一个稍微改进的版本，直到有更好的东西可用。我添加了一个 idle根据文档 https://developers.google.com/maps/documentation/javascript/reference#Map 的 Google map 事件监听器

This event is fired when the map becomes idle after panning or zooming.

在我的情况下，这是必需的。请注意，我尝试将事件监听器附加到 tilesloaded你会认为它会起作用，但它不会。

所以把它们放在一起我有以下内容:

(function($)
{
    $.fn.removeStyle = function(style)
    {
        var search = new RegExp(style + '[^;]+;?', 'g');

        return this.each(function()
        {
            $(this).attr('style', function(i, style)
            {
                return style.replace(search, '');
            });
        });
    };
}(jQuery));

var mapTargetElement, mapIdleListener;
function createMap(target, location) {
    mapTargetElement = target;
    var url = "http://maps.google.com/maps/api/geocode/json?address=" + location + "&sensor=false";
    $.getJSON(url,function (data, textStatus, jqXHR) {
        var r = data.results[0];            
        var jobLatLang = new google.maps.LatLng(r.geometry.location.lat, r.geometry.location.lng);
        var mapOptions = {
            zoom: 12,
            center: jobLatLang
        };

        var map, marker;
        map = new google.maps.Map(document.getElementById(target),mapOptions);
        mapIdleListener = google.maps.event.addListener(map,'idle',removeWebkitTransforms);
        marker = new google.maps.Marker({
            position: jobLatLang,
            map: map,
            title: r.formatted_address
        });
        marker.setMap(map);
        map.panTo(marker.getPosition());        
    });
}

function removeWebkitTransforms() {
    google.maps.event.removeListener(mapIdleListener);
    $("#" + mapTargetElement).removeStyle("-webkit-transform").find("*").each(function() {
        $(this).removeStyle("-webkit-transform");
    });
}

Answer 1

代码:

.google-map.google-map-wide 
{ 
   -webkit-transform: none !important;"
}

进入 CSS 代码。

它立即解决了字体渲染问题。