我有一个基于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/

10-12 04:35
查看更多