Question

我准备发布这个，然后我发现了。但无论如何，我会为其他需要它的人发布它。学到的经验是，如果您希望它们在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通道。

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中解决问题check this

Answer 5

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

有关详细信息，请参阅此链接 Google Maps SVG marker doesn't display on IE 11

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

5 个答案: