Google Maps V3 自定义标记未在 IE 中显示

Posted 2023-02-18

【中文标题】Google Maps V3 自定义标记未在 IE 中显示

【英文标题】：Google Maps V3 Custom Markers Not Displaying In IE

【发布时间】：2011-12-27 04:45:58

【问题描述】：

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

---

一段时间以来，我遇到了一个问题，即使用自定义图像创建的 Google Maps API V3 标记在 IE 或 Safari 中不显示。它在我测试过的所有其他浏览器中都能正常工作，但我们的大多数用户群仍在 IE 上，所以我需要修复这个问题。

这显然是一个已知问题（至少对 Google 而言），如此 Google 支持线程中所示： 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 标记图像。我只让 .jpgs 工作，这很烦人，因为它们不支持 alpha 通道。

【参考方案1】：

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

查看此链接了解更多详情 Google Maps SVG marker doesn't display on IE 11

【参考方案2】：

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

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

不知道为什么这解决了 IE 中的问题，check this

【参考方案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);

【参考方案4】：

添加元标记

<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 ';

【参考方案5】：

另一种选择是使用MarkerImage 类。

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

【讨论】：

好主意。除了它没有任何区别。我试过了。