Пользовательские маркеры Google Maps V3 не отображаются в IE - PullRequest
Новая
       63

Пользовательские маркеры Google Maps V3 не отображаются в IE

6 голосов
/ 11 ноября 2011

Я собирался опубликовать это, затем я понял это. Но я все равно выложу это для всех, кому это нужно. Извлеченный урок заключается в использовании .ico-файлов для пользовательских изображений маркеров, если вы хотите, чтобы они работали в IE. (Как примечание, это все еще не работает правильно в Safari, но это другая проблема.)

У меня уже давно есть проблема, когда маркеры API Карт Google 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 на работу, что раздражает, потому что они не поддерживают альфа-канал.

Ответы [ 5 ]

2 голосов
/ 13 июня 2015

добавить метатег 

<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 ';
0 голосов
/ 08 сентября 2017

Настройка optimized: false при создании пользовательского Marker исправила проблему, с которой я сталкивался, когда .svg значки не появлялись в IE.

Смотрите эту ссылку для более подробной информации Маркер Google Maps SVG не отображается в IE 11

0 голосов
/ 16 марта 2016

Еще одна возможность - добавить свойство draggable = true к маркерам: 

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

Не знаю, почему это решает проблему в IE, проверьте это

0 голосов
/ 06 августа 2015

IE должен хотеть определенные файлы PNG. Обновление моего источника динамических иконок из примера API Google 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);
0 голосов
/ 11 ноября 2011

Другой вариант - использовать класс MarkerImage . 

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