Google会映射标记图标 - 调整大小时图像质量会下降

本文介绍了Google会映射标记图标 - 调整大小时图像质量会下降的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在Google地图中调整我自己的地图标记图标（png文件）时，我遇到了图像质量问题。

I'm having icon image quality issues when resizing my own map marker icons (png files) in google maps.

以下是问题的示例：

使用Google的简单标记示例代码：（developers.google.com/maps/documentation/javascript/examples/marker-simple）

Taking Google's 'Simple markers' example code:(developers.google.com/maps/documentation/javascript/examples/marker-simple)

并且只添加一个新的'icon'对象（我相信已经从v3.11 map api替换了MarkerImage对象）给了我以下代码（）：

and adding only a new 'icon' object (which I believe has replaced MarkerImage object from v3.11 maps api) gives me the following code (http://codepen.io/anon/pen/AIgkf?editors=100):

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
        function initialize() {
            var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);

            var mapOptions = {
                zoom: 4,
                center: myLatlng
            }

            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var myicon = {
                url: 'https://bnuviq.dm2301.livefilestore.com/y2pOGYfm607bdir1fks45DMUo0i9S-R5cZ1yc2Fy6kE6UAqf9qlmcHnwSeMvLrnAFz4YEFrYEu3JxMZBWHOxloZdlHmRhsuZmQR4rdP1G7K76o/blue_20.png?psid=1',
                origin: new google.maps.Point(0, 0),
                scaledSize: new google.maps.Size(24, 24),
                anchor: new google.maps.Point(12, 12)
            };

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: myicon,
                //draggable: true,        // uncomment this draggable property or set draggable=false and icon displays correctly in Chrome???
                title: 'Test custom map icon'
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

我的原始png是100x100像素，但调整大小的24x24图标的图像质量不是很好。白色数字的边缘变得锯齿状。

My original png is 100x100 pixels but the image quality of the resized 24x24 icon is not very good. The edges of the white numbers become jagged.

我正在使用100x100像素的原始png文件，因为我想为web和iOS / Android使用相同的图像文件应用和应用想要使用更大的地图图标来防止像素化。

I am using an original png file of 100x100 pixels because I want to use the same image file for both web and iOS/Android apps and the apps want to use larger map icons to prevent pixelisation.

浏览器行为

Chrome（Windows / Ubuntu）

图标图像质量不好 - 数字有锯齿状边缘

然而，奇怪的是，如果标记的'draggable'属性设置为'true'，Chrome会正确显示图标，即没有锯齿状边缘???

Chrome (Windows/Ubuntu)
icon image quality not good - numbers have jagged edges
Strangely however, if the marker's 'draggable' property is set to 'true', Chrome displays the icon correctly i.e. with no jagged edges???

Firefox（Windows / Ubuntu）

图标图像质量不好 - 数字有锯齿状边缘

Firefox (Windows/Ubuntu)
icon image quality not good - numbers have jagged edges

IE（Windows）

图标图像质量不好 - 数字有锯齿状边缘

IE (Windows)
icon image quality not good - numbers have jagged edges

任何人都可以建议如何让我调整大小的地图图标更好地显示？

Can anyone suggest how to get my resized map icons displaying better?

问题是原始png文件的大尺寸还是别的？当'draggable = true'时，为什么图标在Chrome中正确显示的任何想法？

Is the problem the large size of the original png file or something else? And any ideas why the icon displays correctly in Chrome when 'draggable=true'?

提前感谢

p.s.第一篇文章，道歉，如果我遗漏了任何东西

Thanks in advance
p.s. first post, apologies if I've left anything out

100x100

Google会映射标记图标 - 调整大小时图像质量会下降

问题描述

推荐答案