具有PNG后备功能的Google Maps SVG标记

Question

我已经为使用自定义SVG标记的Google地图实现了以下代码：

function add_marker( $marker, map ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

    // create marker
    var iconBase = 'http://localhost:8888/theme/wp-content/themes/bananas/images/';
    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map,
        icon        : iconBase + 'marker.svg'
    });

    // add to array
    map.markers.push( marker );

    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content     : $marker.html()
        });

        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {

            infowindow.open( map, marker );

        });
    }

}

这很好用，但我想知道是否可以为不支持SVG的浏览器添加PNG后备？

也许可以显示div而不是图标，然后用modernizr控制SVG检测。

Answer 1

我意识到这是一个古老的问题，但是对于任何其他正在思考此问题的人：当然可以！在同一文件夹中同时创建svg和png图标，并将文件扩展名设置为变量，如下所示：

var imageType;

然后您可以这样称呼它：

icon: '/your/folder/marker.' + imageType

这允许您基于浏览器更改文件扩展名，如下所示：

if (!!navigator.userAgent.match(/Trident/g) === true) { //IE
   imageType = 'png';
} else {
   imageType = 'svg';
}

瞧！用于现代视网膜显示的清晰矢量图标，以及用于运行Windows 7的祖母的可靠栅格图标。：-）

Answer 2

我不认为Google Maps API会为您处理回退，但

您可以使用Modernizr插件中的Modernizr.svg功能自行处理，以检查当前浏览器是否支持svg。

我有一个sample in jsfiddle.，这里是direct link.

https://css-tricks.com/using-svg/#cp_embed_lCEux