在Svg中添加谷歌地图

Adding google maps inside Svg

本文关键字：谷歌地图 添加 Svg      更新时间：2023-09-26

我有一个基于svg的框架，所以里面添加的任何东西都需要在svg里面。

我正在尝试添加一个谷歌地图现在，但没有成功。为了添加谷歌地图，我尝试创建一个div元素，id为"地图"，我稍后在谷歌地图内部使用分配地图。

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

为了创建div，我使用了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();
这里的

小提琴

为了在Google Maps中显示任何内容，您需要一个宽度和高度。显然，我处理属性的方法不是正确的方法。我应该写的是:

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

小提琴

相关文章：