Javascript Google Maps SVG标记与PNG回退

我为带有自定义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而不是一个图标，然后用Modernizer控制SVG检测。

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

您可以使用Modernizr插件中的

Modernizr.svg

功能来检查当前浏览器是否支持

svg

我有一个电话号码，这是电话号码

---

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

var imageType;

然后你可以这样称呼它：

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

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

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

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

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

---

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

太好了，我下周就试试这个。我假设可以用图像替换您绘制的SVG形状，如下所示：

var image\u svc=”http://localhost:8888/theme/wp-content/themes/banana/images/marker.svg”？我对此不太确定。您应该能够做到这一点，但我想我在某个地方读到过，它说google map无法直接从外部文件读取svg图像。因此，您可能需要使用其他方法首先将svg作为对象加载到文件中。我还没试过，所以我不知道：）