我有一个基于svg的框架,因此添加在其中的所有内容都必须在svg内。
我正在尝试立即添加Google地图,但没有成功。为了添加Google地图,我尝试创建一个ID为“ map”的div元素,以后我会在Google地图中使用它来分配地图。
var div = fo.append('xhtml:div')
.attr('width',500)
.attr('height',512)
.attr('id','map');
为了使我的股利,我使用foreignobject,我只定义宽度和高度
var fo = svg.append('foreignObject')
.attr('x',10)
.attr('y',10)
.attr('width', 500)
.attr('height', 512);
谷歌地图是最基本的代码:
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
最佳答案
为了使任何内容都能显示在Google地图中,您需要一个宽度和一个高度。显然,我对属性的处理方式不正确。相反,我应该写的是:
var div = fo.append('xhtml:div')
.attr('style','width:500px;height:512px;')
.attr('id','map');
Fiddle here
关于javascript - 在SVG中添加谷歌 map ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39877133/