在 Svg 中添加谷歌地图答案

【问题标题】：Adding google maps inside Svg在 Svg 中添加谷歌地图
【发布时间】：2016-10-05 14:45:09
【问题描述】：

我有一个基于 svg 的框架，因此添加的任何内容都需要在 svg 中。

我现在正在尝试添加谷歌地图，但没有成功。为了添加谷歌地图，我尝试创建一个 id 为“map”的 div 元素，稍后我会在谷歌地图中使用它来分配地图。

var div = fo.append('xhtml:div')
            .attr('width',500)
            .attr('height',512)
            .attr('id','map');

为了制作我的 div，我使用了只定义宽度和高度的外来对象

var fo = svg.append('foreignObject')
            .attr('x',10)
            .attr('y',10)
            .attr('width', 500)
            .attr('height', 512);

google maps 是最基本的代码：

function initialize()
{
var myLatLng = new google.maps.LatLng(28.617161,77.208111);
var map = new google.maps.Map(document.getElementById("map"),
{
    zoom: 10,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker(
{
    position: myLatLng,
    map: map,
});
}
initialize();

Fiddle here

【问题讨论】：

“没有成功”是什么意思？您是否在浏览器控制台中遇到任何错误？
没有成功我的意思是它不起作用。没有显示谷歌地图。没有控制台错误。

标签： javascript google-maps svg

【解决方案1】：

为了在 Google 地图中显示任何内容，您需要一个宽度和一个高度。显然，我使用属性的方式不是正确的方式。相反，我应该写的是：

 var div = fo.append('xhtml:div')
            .attr('style','width:500px;height:512px;')
            .attr('id','map');

Fiddle here

【讨论】：