Я пытаюсь отобразить некоторые маршруты автобусов, используя Уровень данных Google, а затем добавить некоторые пользовательские значки. Отлично работает в Chrome и Firefox, но в IE 11 я получаю только маршруты. Я получаю InvalidStateError где-то глубоко в каком-то запутанном коде.
маркеры используют данные uri с некоторым встроенным SVG, который преобразуется в базовые 64 строки. Я также пытался НЕ конвертировать в базу 64; который не генерирует никаких видимых ошибок, но маркеры до сих пор не отображаются.
Упрощенный javascript вставляется ниже, и вы можете увидеть его в действии на jsfiddle.
var map;
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 11,
center: {lat: 38.813605, lng: -89.957399}
});
var geoJsonRoutesUrl = 'https://storage.googleapis.com/gtfs-test/MCT-All-Bus-Routes.json';
var routesLayer = new google.maps.Data();
routesLayer.loadGeoJson(geoJsonRoutesUrl);
routesLayer.setMap(map);
routesLayer.setStyle(function(feature) {
return ({
strokeColor: feature.getProperty('color'),
fillColor: feature.getProperty('color'),
strokeWeight: 6
});
});
var geoJsonRouteMarkersUrl = 'https://storage.googleapis.com/gtfs-test/MCT-All-Bus-Route-Markers.json';
var routeMarkersLayer = new google.maps.Data();
routeMarkersLayer.loadGeoJson(geoJsonRouteMarkersUrl);
routeMarkersLayer.setMap(map);
routeMarkersLayer.setStyle(function(feature) {
var markerIcon = CreateRouteMarkersIconDefinition(
feature.getProperty('route'),
feature.getProperty('color'),
feature.getProperty('backColor'));
return ({icon: markerIcon});
});
function CreateRouteMarkersIconDefinition(route, color, backColor) {
var svgHtml = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="30" height="30">';
svgHtml += '<ellipse cx="15" cy="15" r="15" rx="15" ry="10" fill="' + backColor + '" />';
svgHtml += '<text x="15" y="20" style="text-anchor: middle;" font-family="Verdana" font-size="12px" font-weight = "bold" fill="' + color + '" >' + route + '</text>';
svgHtml += '</svg>';
var svgIcon = {
url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svgHtml),
anchor: new google.maps.Point(15, 15)
};
return svgIcon;
}