您可以在虛擬元素中創建Google地圖

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，但它確實似乎沒有工作谷歌地圖，我得到以下錯誤：

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

但只要任何頁面並不意味着「任何文件」（關於你的描述，它總是在同一個文檔），這是可能的。