Google 地图 V3 自定义标记在 IE 中不显示

Question

我正想发这个帖子，后来我想通了。但无论如何我都会将其发布给其他需要它的人。吸取的教训是，如果您希望自定义标记图像在 IE 中工作，请使用 .ico 文件。 （顺便说一句，它在 Safari 中仍然无法正常工作，但这是另一个问题。）

---

我有一段时间遇到一个问题，即使用自定义图像创建的 Google Maps API V3 标记无法在 IE 或 Safari 中显示。它在我测试过的所有其他浏览器中都运行良好，但我们的大多数用户群仍然使用 IE，所以我需要解决这个问题。

这显然是一个已知问题（至少对谷歌来说），如谷歌支持线程中所示： http://www.google.com/support /forum/p/maps/thread?tid=26db8fd040386548&hl=en

我想知道是否有其他人遇到过这个问题或知道它的解决方法吗？

这是我创建的一个简单测试页面的 js，它演示了这个错误：

var map;
var latLng = new google.maps.LatLng(41.342, -84.932);

$(function() {
    var myOptions = {
        zoom: 17,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var newMarker = new google.maps.Marker({
        map: map,
        position: latLng,
        icon: 'images/active_point.png'
    });
});

---

修复：我将图像转换为 active_point.ico，这对于 IE 来说工作得很好。由于某种原因 IE 不喜欢我的 .png。

---

经过更多研究后，Safari 似乎必须作为特殊情况处理，因为它似乎不适用于 .ico 或 .png 标记图像。我只能使用 .jpg，这很烦人，因为它们不支持 Alpha 通道。

Answer 1

添加元标记

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

和此代码为 Google Api 代码

//google map custom marker icon - .png fallback for IE
var is_internetExplorer11 = navigator.userAgent.toLowerCase().indexOf('trident') > -1;

var marker_url = (is_internetExplorer11) ? 'IE-map-icon-location.png' : 'map-icon-location.png ';

Answer 2

另一种选择是使用 MarkerImage 类。

icon: new google.maps.MarkerImage('images/active_point.png');

Answer 3

IE 必须需要特定的 PNG 文件。从 google api 的示例 apis.google.com 更新我的动态图标源修复了该问题：

 // new source of icons
 var iconnumber = 5;
 var imgsrc = "http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=" + iconnumber + "|00FF00|000000&.png";
 var img = new google.maps.MarkerImage(imgsrc);

Answer 4

另一种可能性是将属性draggable = true添加到标记中：

 <ui-gmap-markers coords="'self'" icon="'icon'" options="{ draggable: true }"> 

不知道为什么这可以解决IE中的问题，检查此项

Answer 5

创建自定义 Marker 时设置 optimized: false 修复了我遇到的 .svg 图标未出现在 IE 中的问题。

请参阅此链接了解更多详细信息
Google 地图 SVG 标记不t 在 IE 上显示11