Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图SVG标记不'；显示在IE11上

Javascript 谷歌地图SVG标记不'；显示在IE11上

javascript google-maps google-maps-api-3 svg

Javascript 谷歌地图SVG标记不'；显示在IE11上,javascript,google-maps,google-maps-api-3,svg,Javascript,Google Maps,Google Maps Api 3,Svg,我的SVG地图标记在IE11上消失。它在Chrome、Firefox、Safari、IE9和IE10中可见，但在11中不可见。我已经上传了我当前代码的一部分。我不知道这是我还是谷歌地图的bug html{高度：100%} 正文{高度：100%；边距：0；填充：0} #地图画布{高度：100%} 函数初始化（）{ var sanfrancisco=newgoogle.maps.LatLng（37.78062，-122.397203）； 变量映射选项={ 缩放：18， zIndex:0， 中心：

我的SVG地图标记在IE11上消失。它在Chrome、Firefox、Safari、IE9和IE10中可见，但在11中不可见。我已经上传了我当前代码的一部分。我不知道这是我还是谷歌地图的bug


html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
函数初始化（）{
var sanfrancisco=newgoogle.maps.LatLng（37.78062，-122.397203）；
变量映射选项={
缩放：18，
zIndex:0，
中心：旧金山，
mapTypeControl:true，
mapTypeControlOptions：{
MapTypeId:[google.maps.MapTypeId.ROADMAP，'usroadatlas']
}，zoomControl:true，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL
},
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
//var image='img/1p_marker3.png'；
var图像处理http://firstperson.is/assets/img/contact/map_marker.svg';
var marker=new google.maps.marker({
职位：旧金山，
地图：地图，
图标：图像
});
变量roadAtlasStyles=[
{
“featureType”：“poi”，
“elementType”：“几何体”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“特色类型”：“景观”，
“elementType”：“geometry.fill”，
“造型师”：[
{“颜色”：“#003a70”}
]
},{
“特色类型”：“景观”，
“elementType”：“geometry.stroke”，
“造型师”：[
{“颜色”：“#0075c9”}
]
},{
“功能类型”：“行政用地”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“elementType”：“labels.text.fill”，
“造型师”：[
{“颜色”：“#ffffff”}
]
},{
“elementType”：“labels.text.stroke”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“功能类型”：“道路干线”，
“elementType”：“几何体”，
“造型师”：[
{“颜色”：“#0075c9”}
]
},{
“功能类型”：“道路”，
“elementType”：“labels.text.fill”，
“造型师”：[
{“颜色”：“#ffffff”}
]
},{
“功能类型”：“road.local”，
“elementType”：“几何体”，
“造型师”：[
{“颜色”：“#0075c9”}
]
},{
“功能类型”：“道路.公路”，
“elementType”：“几何体”，
“造型师”：[
{“颜色”：“#d0343a”}
]
},{
“功能类型”：“道路、公路、受控通道”，
“elementType”：“几何体”，
“造型师”：[
{“颜色”：“#ff4539”}
]
},{
“featureType”：“transit.line”，
“elementType”：“几何体”，
“造型师”：[
{“颜色”：“#0075c9”}
]
},{
“featureType”：“transit”，
“elementType”：“labels.text.fill”，
“造型师”：[
{“颜色”：“#ffffff”}
]
},{
“featureType”：“poi”，
“elementType”：“labels.icon”，
“造型师”：[
{“反转亮度”：真的}，
{“色调”：“#0077ff”}
]
},{
“featureType”：“poi”，
“elementType”：“labels.text”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“featureType”：“poi”，
“elementType”：“标签”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“功能类型”：“poi.park”，
“elementType”：“labels.text.fill”，
“造型师”：[
{“可见性”：“在”}，
{“颜色”：“#ffffff”}
]
},{
“功能类型”：“poi.park”，
“elementType”：“labels.icon”，
“造型师”：[
{“可见性”：“在”}
]
},{
“功能类型”：“poi.sports_complex”，
“elementType”：“labels.text.fill”，
“造型师”：[
{“可见性”：“在”}，
{“颜色”：“#ffffff”}
]
},{
“功能类型”：“管理”，
“elementType”：“labels.text.fill”，
“造型师”：[
{“颜色”：“#ffffff”}
]
},{
“featureType”：“administration.neighbour”，
“elementType”：“labels.text”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“特征类型”：“行政省”，
“elementType”：“几何体”，
“造型师”：[
{“可见性”：“在”}，
{“重量”：0.9}
]
}
];
var styledMapOptions={
名称：“美国道路地图册”
};
var usroadmotype=new google.maps.StyledMapType(
道路交通方式、交通方式）；
map.mapTypes.set（'usroadatlas'，usroadtype）；
map.setMapTypeId（'usroadatlas'）；
//var transitLayer=new google.maps.transitLayer（）；
//transitLayer.setMap（map）；
};
google.maps.event.addDomListener（窗口“加载”，初始化）；
我不确定这是否有帮助：

明智的做法是定义地图区域的宽度。例如：

#map-canvas { height: 100%; width: 100%; }
IE10是唯一一个一开始就抱怨没有下一行的人

<!DOCTYPE html>
这一行不是来自脚本，因为如果我更改/删除某个内容，消息是相同的。

我也有同样的问题，因为我的ActiveX过滤器已检查。取消选中（properties-safety-activeX filter），然后您可以再次看到标记。
出现此错误是因为我正在使用geoxml3。

谷歌地图目前似乎不支持对标记图像使用SVG。不过，通过使用对象，您可以使用矢量标记图标

有关更多详细信息，请参阅至。

向图像/图标添加
缩放大小
，并向标记添加
优化：false
，为我解决了此问题

我在一个项目中遇到了一个非常类似的问题，但我当时的处境是无法编辑gmjavascript

下面是我想分享的CSS方法：

#someGoogleMapsWrapperHere .gm-style img[src$='.svg'] {
    width: 48px !important;
    height: 48px !important;
}
这只会选择img元素，这些元素具有src属性值，该属性值在GM集成中以“.svg”结尾，并强制它们使用48px的宽度和高度

我通常尽量避免这些！重要的标记-但在本例中，它是强制性的，因为它必须否决一些在IE11中定义0px宽度和高度的内联样式。

谢谢。我重置了宽度，因为这是一个很好的做法。doctype存在于jsfiddle上，我只是在acci上粘贴代码时没有获取它 
InvalidStateError (line 39)

var image = {
    url: 'https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-marker.svg',
    scaledSize: new google.maps.Size(100, 100),
}

var marker = new google.maps.Marker({
    position: sanfrancisco,
    map: map,
    optimized: false,
    icon: image
});

#someGoogleMapsWrapperHere .gm-style img[src$='.svg'] {
    width: 48px !important;
    height: 48px !important;
}