Question

我想知道可以在虚拟元素中创建一个可用的Google地图，然后可以随时粘贴到任何页面中。

所以这是我的JS在定位页面上已经存在的元素时。

var mapLatLong = new google.maps.LatLng(51.5174456, -0.1305081);
var markerLatlng = new google.maps.LatLng(51.5170951, -0.1367416);

var mapOptions = {
    zoom: 16,
    center: mapLatLong,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map($('#map_canvas'), mapOptions);

var contentString = '<div id="content">'+
                        '<div id="siteNotice">'+
                        '</div>'+
                        '<h1 id="firstHeading" class="firstHeading">BrocklebankPenn</h1>'+
                        '<div id="bodyContent">'+
                            '<p>5th floor, 58-60 Berners Street,<br />London,<br />W1T 3NQ,<br />United Kingdom</p>'+
                            '<p>+44 (0)20 3137 7034</p>'+
                        '</div>'+
                    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var marker = new google.maps.Marker({
    position: markerLatlng,
    map: map,
    title: 'BrocklebankPenn'
});

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});

infowindow.open(map,marker);

我想做的是这样的事情：

this.mapCanvas = document.createElement('div');
this.mapCanvas.setAttribute('id', 'map_canvas');

var mapLatLong = new google.maps.LatLng(51.5174456, -0.1305081);
var markerLatlng = new google.maps.LatLng(51.5170951, -0.1367416);

var mapOptions = {
    zoom: 16,
    center: mapLatLong,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map($(this.mapCanvas), mapOptions);

var contentString = '<div id="content">'+
                        '<div id="siteNotice">'+
                        '</div>'+
                        '<h1 id="firstHeading" class="firstHeading">BrocklebankPenn</h1>'+
                        '<div id="bodyContent">'+
                            '<p>5th floor, 58-60 Berners Street,<br />London,<br />W1T 3NQ,<br />United Kingdom</p>'+
                            '<p>+44 (0)20 3137 7034</p>'+
                        '</div>'+
                    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var marker = new google.maps.Marker({
    position: markerLatlng,
    map: map,
    title: 'BrocklebankPenn'
});

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});

infowindow.open(map,marker);

this.$el.html(this.mapCanvas);

基本上完全相同，但使用variable代替#map_canvas，我过去采用过JS的这种方法，但它似乎不适用于Google地图，我得到以下内容错误：

Uncaught TypeError: Cannot set property 'position' of undefined

我不确定。

如果有人能提供帮助那就太棒了。

干杯，路加。

Answer 1

基本上可以，演示：http://jsfiddle.net/doktormolle/5SjnK/

您的代码存在的问题：

var map = new google.maps.Map($(this.mapCanvas), mapOptions);

$(this.mapCanvas)是一个jQuery对象，但它应该是一个HTML元素

this.$el.html(this.mapCanvas);

不要设置html，必须将原始节点插入文档中。

但我不建议，会有更多问题，例如当您使用尝试访问map-div的parentNode的API方法或需要计算文档内部位置的方法时（两者都会在节点插入文档之前失败）。

与 粘贴到任何网页 相关：

这是不可能的，您使用地图的文档必须与加载API的文档相同，API内部使用对已加载API的窗口/文档的引用。请参阅此问题：Marker drag not working in iframe under Chrome and Firefox

但只要 任何页面 并不代表“任何文档”（关于您的描述，它始终是同一文档），这是可能的。

您可以在虚拟元素中创建Google地图吗？

1 个答案: