Google maps 谷歌地图标记图标-调整大小时图像质量下降

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

以下是问题的一个示例：

以谷歌的“简单标记”示例代码为例：（developers.Google.com/maps/documentation/javascript/examples/marker-Simple）

仅添加一个新的“icon”对象（我相信它已经取代了v3.11 maps api中的MarkerImage对象）就可以得到以下代码（）：

简单标记
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
函数初始化（）{
var mylatng=new google.maps.LatLng（-25.363882131.044922）；
变量映射选项={
缩放：4，
中心：myLatlng
}
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
var myicon={
网址：'https://bnuviq.dm2301.livefilestore.com/y2pOGYfm607bdir1fks45DMUo0i9S-R5cZ1yc2Fy6kE6UAqf9qlmcHnwSeMvLrnAFz4YEFrYEu3JxMZBWHOxloZdlHmRhsuZmQR4rdP1G7K76o/blue_20.png?psid=1',
来源：新google.maps.Point（0,0），
scaledSize：新的google.maps.Size（24,24），
主持人：新谷歌地图点（12，12）
};
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
图标：我的图标，
//draggable:true，//取消对该draggable属性的注释或设置draggable=false，图标在Chrome中正确显示？？？
标题：“测试自定义映射图标”
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

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

我使用的是100x100像素的原始png文件，因为我想在web和iOS/Android应用程序中使用相同的图像文件，并且这些应用程序希望使用更大的地图图标来防止像素化

浏览器行为：

Chrome（Windows/Ubuntu）
图标图像质量不好-数字有锯齿状边缘
奇怪的是，如果标记的“draggable”属性设置为“true”，Chrome会正确显示图标，即没有锯齿状边缘

Firefox（Windows/Ubuntu）
图标图像质量不好-数字有锯齿状边缘

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

有人能建议如何让我的调整大小的地图图标显示得更好吗

问题是原始png文件太大还是其他原因？你知道为什么当“draggable=true”时，图标会在Chrome中正确显示吗

提前感谢

---

p、 如果我在“地图V3”中遗漏了任何内容，请道歉。当您添加一个不可拖动的自定义标记时，“地图”将在谷歌服务器的地图分幅上绘制它，然后发送给您。当您将其标记为可拖动时，它将成为自己的DOM对象。当它是自己的DOM对象时，浏览器处理图标的大小调整，当它在google调整大小时，他们的服务器处理它。在我看来，谷歌用来调整图标大小的算法不如浏览器使用的算法好。（此外，Chrome使用的算法优于FF中的算法，至少在处理文本大小方面是如此）

---

您是否考虑过使用没有文本的自定义图标？调整大小后，它们的外观肯定会更好。您可以始终在信息窗口中添加文本…

在Maps V3中，当您添加不可拖动的自定义标记时，Maps将在google服务器的地图平铺上绘制它，然后将其发送给您。当您将其标记为可拖动时，它将成为自己的DOM对象。当它是自己的DOM对象时，浏览器处理图标的大小调整，当它在google调整大小时，他们的服务器处理它。在我看来，谷歌用来调整图标大小的算法不如浏览器使用的算法好。（此外，Chrome使用的算法优于FF中的算法，至少在处理文本大小方面是如此）

---

您是否考虑过使用没有文本的自定义图标？调整大小后，它们的外观肯定会更好。您可以始终在信息窗口中添加文本…

尝试将标记选项中的优化属性设置为false：

 var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: myicon,
                optimized: false,   // <------
                title: 'Test custom map icon'
            });

var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
图标：我的图标，
优化：false，//尝试将标记选项中的优化的属性设置为false：

 var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: myicon,
                optimized: false,   // <------
                title: 'Test custom map icon'
            });

var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
图标：我的图标，
optimized:false，//如果在javascript中动态调整标记大小时遇到图像质量问题，为什么不在图像编辑器中调整原始标记的大小（使图像达到所需的大小）？希望在web和iOS/Android应用程序中使用相同的高分辨率图标/图像文件，并根据每个用户的需要调整大小。我试图避免使用多个图标文件大小，每个用户一个。如果在javascript中动态调整标记大小时出现图像质量问题，为什么不在图像编辑器中调整原始标记的大小（将图像设置为所需的大小）？希望在web和iOS/Android应用程序中使用相同的高分辨率图标/图像文件，并根据每个用户的需要调整大小。我试图避免使用多个图标文件大小，每个用户一个。感谢您的回复。我的测试肯定证实了您所说的情况。不幸的是，我确实需要使用自己的cust