Question

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

但是，我仍然看到某些文字的差异，特别是我添加Google后的内容position: fixed部分内的文字（即标题和菜单部分）映射到页面。

我正在使用Google Maps API在页面加载页面上嵌入地图，如下所示：

$(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的调用，则文本呈现没有问题（当然这也意味着没有地图），我不知道为什么这会导致position: fixed元素内的文本呈现可能重新渲染？

有什么想法吗？

更新：我现在已经能够获取包含地图的<div>元素，以防止添加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，直到更好的可用。我已根据文档https://developers.google.com/maps/documentation/javascript/reference#Map

向Google地图添加了idle事件监听器

在平移或平移后地图变为空闲时会触发此事件变焦。

在我的情况下是必需的。请注意，我尝试将事件监听器附加到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代码。

它立即对字体渲染问题进行了排序。

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

1 个答案: