你能在虚拟元素中创建一个谷歌地图吗?

Can you create a Google map in a virtual element

本文关键字：一个 谷歌地图 虚拟 元素 创建      更新时间：2023-09-26

我想知道是否有可能在虚拟元素中创建一个工作的谷歌地图，然后可以随时粘贴到任何页面。

所以这是我的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在过去，但它似乎并不适用于谷歌地图，我得到以下错误:

Uncaught TypeError: Cannot set property 'position' of undefined

我不确定。

如果有人能帮忙，那就太好了。

欢呼,卢克。

基本上是可能的，Demo: http://jsfiddle.net/doktormolle/5SjnK/

你的代码的问题:

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

$(this.mapCanvas)是一个jquery对象，但它预计是一个html元素

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

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

但是我不建议它，会有更多的问题，例如，当你使用api方法试图访问map-div的parentNode或需要计算文档内位置的方法(两者都会在节点插入到文档之前失败)。

与相关粘贴到任何页面:

这是不可能的，你使用映射的文档必须是你加载API的文档，API内部使用对加载API的窗口/文档的引用。在Chrome和Firefox下，标记拖动在iframe中不起作用

但只要任何页面不意味着"任何文档"(关于你的描述，它总是相同的文档)，这是可能的

相关文章：