使用 svg 对象作为 Google 地图的容器答案

【问题标题】：Using an svg object as a container for a Google map使用 svg 对象作为 Google 地图的容器
【发布时间】：2014-09-28 09:00:00
【问题描述】：

正如标题所说，我有一个 svg 对象，我希望该对象包含一个 Google 地图实例。我试图以与通常使用 div 或简单元素相同的方式执行此操作，使用 Javascript 和 getElementByID 并将地图放置在元素内。但是，这似乎在这里不起作用。我做了很多搜索，但由于谷歌使用 svg 自定义图标并覆盖所有响应都与此相关。关于将id="map_canvas 放在哪里，我主要尝试了不同的方法，但没有任何效果。

我的 HTML 以 svg 作为对象：

<div class="row map">

 <div class="span12">

    <object type="image/svg+xml" id="map_canvas" data="assets/map/MA_map.svg"></object>

 </div>

</div>

我的 JavaScript（当前位于 <head> 标记中，但我想将其移动到 .js 文档中）：

<script>
    function initialize() {
        var mapCanvas = document.getElementById('map_canvas');
        var mapOptions = {
            center: new google.maps.LatLng(44.5403, -78.5463),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

最后这就是我的svg 文件的样子（在 Illustrator 中创建）：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" 
 id="map_canvas" 
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

 viewBox="-79.892 94.942 960 599.864" 
 enable-background="new -79.892 94.942 960 599.864"
 xml:space="preserve">

<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
<feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
<feMerge> 
<feMergeNode/> <!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>

<path  
 id="map_canvas" 
 style="filter:url(#dropshadow)" 

 <path //lots of lines of code for the path />

 </svg>

【问题讨论】：

您能解释一下您最终要达到的目标吗？为什么要尝试将 Google 地图放入 SVG 中？
我希望谷歌地图出现在复杂的形状内。我知道如何使用常规 div 作为地图的画布，但根据客户的要求，这是不同的。

标签： javascript jquery html css svg

【解决方案1】：

您可以尝试的可能解决方案：

使用带有<clipPath> 或<mask> 的SVG <foreignObject>。不过，我不确定它的效果如何。
使用 CSS 掩码 (http://caniuse.com/#feat=css-masks)。
创建一个与背景颜色相同的地图Polygon，其大小与地图相同，并且有一个与面具形状相同的孔。
用<img>（例如PNG）覆盖地图，其颜色或纹理与背景相同，并且有一个与面具形状相同的孔。

【讨论】：